How can I increase the size of some font sizes which have shrunk on Mobile view?

Shopify Discussion

Topic summary

A Shopify store owner reported font sizes appearing too small on mobile view in two specific areas: product names on product pages and collection titles on collection pages. Desktop view displayed correctly.

Solution provided:

  • Custom CSS code was shared to be added to the theme.liquid file, placed above the </body> tag
  • The code uses media queries to increase font sizes specifically for mobile devices (max-width: 767px)
  • Initial code targeted product titles (.product__title)
  • Updated code also addressed collection page headers (.collection-hero__title)

Outcome:

  • The user successfully implemented the CSS fixes
  • Both mobile font size issues were resolved
  • Screenshots were provided showing the corrected mobile display
  • Discussion marked as resolved by the original poster
Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi there, hoping someone can help me!

I have some issues with font sizes which have become too small on Mobile view. Both are fine on Desktop.

The issues are in two site areas only:

  1. Product Name on Product Page

  2. Collection Title on Collection Pages

Do I need to amend some code? My site is www.cheerings.co.uk Thanks for any help in advance!

2 Likes
2

Mustafa_Ali_0-1744461912212.png
Mustafa_Ali_0-1744461912212.png319×569 53.8 KB

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
before the body ----->
if this code work please do not forget to like and mark it solution

1 Like
3

Thanks so much for the help. I think I pasted it in the right place but it wouldn’t accept the code unfortunately. Could you perhaps share a screengrab of exactly where the code needs to go as I think I may have put it in the wrong place. Sorry! Thanks so much again!

4

Hey @HelenaFisher

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1744462615707.png
Moeed_0-1744462615707.png355×760 214 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
5

Thank you very much that is amazing help! Is there a similar code I need to add to increase the size of my Collection title header please? It has also reduced to a too small font on mobile view. See link here https://cheerings.co.uk/collections/dangles

Hope its ok to ask that additional question - and thank you again!

1 Like
6

Hey @HelenaFisher

Update the previous code with this code below

RESULT:

Moeed_0-1744464267808.png
Moeed_0-1744464267808.png352×761 150 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
7

Thanks so much, a big help! I’ve liked it but can’t see another Mark as Solution option to check but thank so much again!