Return to previous page

How to Increase checkout page font size for mobile devices

This topic has 6 replies, 2 voices, and was last updated 1 weeks, 3 days ago ago by Luca Rossi

Deep

Participant

May 9, 2024 at 07:33

How to Increase checkout page font size for mobile devices

Content is visible for topic creator and
support staff only.

#394504 Copied Theme version: 9.3.9

5 Answers
Luca Rossi

Support staff

May 9, 2024 at 07:44
Dear @Deep,

I hope this message finds you well. To achieve the desired functionality swiftly, please insert the following custom CSS code by navigating to Theme Options > Theme Custom CSS > Global CSS in your admin panel:
```
@media (max-width: 480px){
    body.woocommerce-checkout,
    body.woocommerce-checkout *{
        font-size: 18px;
    }
}
```
We trust this code will assist you in enhancing your website’s mobile responsiveness. Should you require any further assistance, please do not hesitate to contact us.

Best Regards,
The 8Theme Team
#394506 Copied
Deep

Participant

May 9, 2024 at 08:27

font has been increaded but overlaping text box lable and inputes issue with this code please look into this

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#394513 Copied
Luca Rossi

Support staff

May 9, 2024 at 08:45
Hi @Deep,

Please delete the previous code and add this code instead:
```
@media (max-width: 480px){
    .woocommerce-checkout form.checkout.woocommerce-checkout input {
        font-size: 18px !important;
        height: 50px;
    }
}
```
Hope it helps!
#394515 Copied
Deep

Participant

May 9, 2024 at 09:02

code is working on text box but redio button and checkbox has some alignment issue please fix this screeshot attached

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#394520 Copied
Luca Rossi

Support staff

May 9, 2024 at 09:25
Hi @Deep,

Sorry for the confusion!

The correct code shoud be:
```
@media (max-width: 480px){
    .woocommerce-checkout form.checkout.woocommerce-checkout input[type="text"],
    .woocommerce-checkout form.checkout.woocommerce-checkout input[type="tel"],
    .woocommerce-checkout form.checkout.woocommerce-checkout input[type="email"] {
        font-size: 18px !important;
        height: 50px;
    }
}
```
Regards!
#394526 Copied
Tagged: best selling woocommerce themes, enhance mobile checkout visibility, improve woocommerce mobile experience, increase checkout page font size, optimize mobile checkout page, woocommerce themes customization
Viewing 6 results - 1 through 6 (of 6 total)