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

Shopify Discussion
,

Topic summary

Main issue: On placentactive.com.au, product page text appears too small on mobile and too large on desktop. The goal is to balance typography across devices.

Actions taken:

  • A helper provided CSS media queries (max-width: 767px) to paste before in theme.liquid, increasing mobile font sizes for breadcrumbs, upsell content, variant countdown, product price/description, and adjusting the “price off” size.
  • After the product description improved but sections like “product benefits” and “how to apply” stayed small, additional CSS was shared to specifically enlarge accordion titles (.product__accordion__title) and content (.product__accordion__inner).

Results: The second CSS solved the remaining small-text issues; the user confirmed the changes worked as expected. Code snippets are central to the solution.

Latest update / open question: The user now asks how to make product page headers on mobile both bold (matching desktop weight) and slightly larger to improve readability.

Status: Partially resolved. Font sizing on mobile has been improved; guidance is pending on making mobile headers bold and larger.

Summarized with AI on December 20. AI used: gpt-5.
1

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.

2

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

thank you!

3

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 on theme.liquid

@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; } }

niraj_patel_0-1725100762659.png
niraj_patel_0-1725100762659.png317×541 26.6 KB

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

1 Like
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?

5

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 on theme.liquid

@media screen and (max-width: 767px) { .product__accordion__title { font-size: 16px !important; } .product__accordion__inner{ font-size: 18px !important; } }

niraj_patel_0-1725105119775.png
niraj_patel_0-1725105119775.png319×412 5.83 KB

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

6

Thank you so much; it worked as expected! :slightly_smiling_face:

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.