Prestige Theme – Changing font size on mobile only

Solved
sventricelli
Tourist
6 0 2

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

IMG_4169.PNG

IMG_4171.PNG

0 Likes
Pallavi
Shopify Expert
2235 370 484

Hello There,
Add this code in head tag

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
sventricelli
Tourist
6 0 2

@Pallavi 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?

0 Likes
Pallavi
Shopify Expert
2235 370 484

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
sventricelli
Tourist
6 0 2

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

 

Screen Shot 2021-03-02 at 9.15.43 AM.png

0 Likes
Pallavi
Shopify Expert
2235 370 484

This is an accepted solution.

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes

This is an accepted solution.

@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 </html>)

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
Pallavi
Shopify Expert
2235 370 484

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes