My shopify product font is smaller on mobile view then desktop view any way round this?

Solved

My shopify product font is smaller on mobile view then desktop view any way round this?

sofiakarkus
Excursionist
26 1 4

My store’s product page font is very small in mobile view and appears too large on desktop view. Is there anything I can do to make it look better? My store is placentactive.com.au.

Accepted Solution (1)
sofiakarkus
Excursionist
26 1 4

This is an accepted solution.

Thank you so much; it worked as expected! 🙂

I have another question: Is it possible to make the product page headers as bold on the mobile version as they are on the desktop version and also a bit bigger? Otherwise, there’s just too much text.

View solution in original post

Replies 5 (5)
sofiakarkus
Excursionist
26 1 4

It’s https://placentactive.com.au

thank you!

niraj_patel
Shopify Partner
2391 516 513

You 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) {
   .breadcrumbs, .product-upsell__content, .variant__countdown {
        font-size: 15px !important;
    }
    .product__price-and-badge .product__price, .product__block.product__description.rte.aos-init.aos-animate {
         font-size: 16px !important;
    }
    .product__price--off {
        font-size: 10px !important;
     }
   }
</style>

niraj_patel_0-1725100762659.png

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

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
sofiakarkus
Excursionist
26 1 4

Thank you! My product description looks bigger and more readable now, but other text elements like product benefits, how to apply, etc., still appear as small as they were before. Is there any way to adjust these as well to make them look bigger?

niraj_patel
Shopify Partner
2391 516 513

You 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__accordion__title {
       font-size: 16px !important;
    }
    .product__accordion__inner{
        font-size: 18px !important;
    }
}
</style>

niraj_patel_0-1725105119775.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Please Mark my both solutions as an Accepted Solution.
Thanks 🙂

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
sofiakarkus
Excursionist
26 1 4

This is an accepted solution.

Thank you so much; it worked as expected! 🙂

I have another question: Is it possible to make the product page headers as bold on the mobile version as they are on the desktop version and also a bit bigger? Otherwise, there’s just too much text.