css bugs after update

[Rahim]

Hi Harry,

I have added these custom codes for overriding the checkout page :

/* woocommerce checkout fields */

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    float: right;
}

.woocommerce form .form-row-last {
    float: left;
}

p#billing_city_field {
    /*  float: right;
    width: 100%;*/
}
input#username {
    text-align: left;
}

input#billing_phone {
    text-align: left;
    direction: ltr;
}

p#billing_postcode_field {
    float: left;
}

input#billing_postcode {
    text-align: left;
}

input#billing_email, input#billing_email-2 {
    text-align: left;
}

.validate-postcode {
    width: 100%;
}

input:not([type="submit"]):not([type="checkbox"]),
textarea,
select {
    font-family: 'IRANSans', sans-serif;
}

If you check my checkout page you will see that in the desktop view it’s fine.
But in the mobile view after the update, the field of address has moved and the field of city has gone to the next line.

How can I fix it?

Thank you. 🙂

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please edit

p#billing_city_field {
    float: left;
    width: 100%;
}

to

p#billing_city_field {
    float: left;
    width: 49%;
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

How can I do this on the checkout page? http://take.ms/0TY0F

Regards.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

I checked and see you add custom css for text align left.

Please change to

input#billing_postcode {
    text-align: right;
}

input#username {
    text-align: right;
}

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

I meant just the placeholder not the text align of the value.

in the RTL, the placeholders should have right text align, but the fields like postal code or numbers should have the left text align for the values. Because in both RTL and LTR, the numbers start from left.

I fixed that with this :

::-webkit-input-placeholder { text-align:right; }
input:-moz-placeholder { text-align:right; }

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please add new code

.rtl input:focus::-webkit-input-placeholder { text-align:right;}
.rtl input:focus::-moz-placeholder { text-align:right;}
.rtl input:focus:-ms-input-placeholder { text-align:right;}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts