Prestige Theme – Changing font size on mobile only

[sventricelli]

Hi all,

Our font size on our site (www.illuminate-food.com) looks great on desktop, but it’s tiny and unreadable on mobile. I cannot figure out how to fix it. In typography, I’m at the max size, and coding suggestions on other forums don’t seem to work.

See screenshots below (which, by the way, are entirely different than the Shopify mobile preview when editing my theme). Please let me know if you can help - much appreciated!

Shayna

[ZestardTech]

Hello There,
Add this code in head tag

Screenshot :- https://prnt.sc/107e4yw

[sventricelli]

@ZestardTech THANK YOU! This worked. The only thing it did not change is the size of the logo, in the center of the header. Any ideas on that?

[ZestardTech]

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width:767px){
h1.Header__Logo .Header__LogoImage {
max-width: 140px;
}
}

[sventricelli]

Thanks so much again! That one doesn’t seem to work for me. Did I do something incorrectly?

[ZestardTech]

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width:767px) {
h1.Header__Logo .Header__LogoImage {
max-width: 140px;
}
}

[diego_ezfy]

@sventricelli

Don’t forget to delete the code you added on the screenshot you shared. It’s in the wrong place and It may break your theme. (everything below )

Kind regards,
Diego

[ZestardTech]

Kindly feel free to get back to me if you need any further assistance Thanks!

[Zoubidou75]

Hey there thanks for sharing ! At the contrary,

• Do you know the code for display only on desktop ?
• And to not display at all for exemple (desktop or mobile)

Thanks a lot,

Using the same thème Prestige

[Kicosbo]

Hi,

How do I make the font size smaller on mobile view for prestige theme?