How to make all text smaller on mobile only

[baileyg1]

The webpage looks fine on computer, but I need to scale ALL text on my website down on mobile only. This includes:

• Add to cart buttons

• Product titles

• Prices

• Captions

etc

How can I do this?

91f208-39.myshopify.com
Password is Fitshake

[PageFly-Henry]

Hi @baileyg1

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

body.gradient.animate–hover-default {

font-size: 16px;

}

a, button span {

font-size: 12px !important;

}

span.price-item.price-item–regular {

font-size: 14px;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[niraj_patel]

Hello @baileyg1

ou can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .product__title h1 { font-size: 18px !important; } span.price-item.price-item--regular { font-size: 16px !important; } button span { font-size: 16px !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.