Solved

Prestige Theme – Changing font size on mobile only

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

Accepted Solutions (2)
ZestardTech
Shopify Expert
5393 970 1291

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

View solution in original post

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

Replies 8 (8)

ZestardTech
Shopify Expert
5393 970 1291

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
sventricelli
Tourist
6 0 2

@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
Shopify Expert
5393 970 1291

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

ZestardTech
Shopify Expert
5393 970 1291

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
Zoubidou75
Excursionist
48 0 4

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 🙂 

diego_ezfy
Shopify Partner
2935 562 883

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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

ZestardTech
Shopify Expert
5393 970 1291

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