HOW TO MAKE ALL TEXT SMALLER ON MOBILE ONLY

HOW TO MAKE ALL TEXT SMALLER ON MOBILE ONLY

baileyg1
Visitor
3 0 0

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

Replies 2 (2)

PageFly-Henry
Shopify Partner
1184 335 283

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

techlyser_web
Shopify Partner
1849 345 373

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 </body> on theme.liquid
<style>
@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;
}
}
</style>

techlyser_web_0-1709870850090.png

techlyser_web_1-1709870885482.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com