Mobile font size issue - Product Page product names and price suddenly too big

Shopify Discussion

Topic summary

A Shopify store owner reported that product names and prices on product pages suddenly appeared too large on mobile devices only. The theme’s typography settings (headings/body) were already at minimum 100%, preventing adjustment through the standard interface.

Solution provided:

  • Add custom CSS code to the base.css file (Actions > Edit code > Assets)
  • Use a media query targeting mobile screens (max-width: 749px)
  • Adjust .product__title font-size and line-height properties

Outcome:
The CSS solution successfully resolved the issue. The store affected is cheerings.co.uk.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi there, my product names on my product pages have suddenly become slightly too big on mobile view only.

Can anyone help me work out how I can find reduce them slightly and test out a couple of sizes? I can’t amend it on my overall theme typography settings (headings/body set to minimum 100%). I wonder if I need to tweak some code but not sure where, hoping someone might know.

Site is www.cheerings.co.uk Thank you for any thoughts in advance!

2

Hey! I had a look at your store - Could you try the following and report back?

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
  .product__title {
    font-size: 14px; /* Adjust this value to your preference */
    line-height: 1.2; /* adjust line height for your desired spacing */
  }
}
1 Like
3

Thank you, I think that worked I really appreciate your help. I couldn’t work it out!