FROM CACHE - en_header

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

Accepted Solutions (2)

Accepted Solutions
ZestardTech
Shopify Expert
3606 595 837

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
2799 528 731

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

View solution in original post

Replies 8 (8)
ZestardTech
Shopify Expert
3606 595 837

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
3606 595 837

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
3606 595 837

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
diego_ezfy
Shopify Partner
2799 528 731

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

ZestardTech
Shopify Expert
3606 595 837

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
Zoubidou75
Excursionist
43 0 3

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 🙂