How to change logo size on mobile-only -- supply theme?

Solved
Highlighted
Tourist
14 0 3

Hello,

How do I make the logo smaller for mobile-only?

 

I can't find a width amount that looks good for both desktop on mobile. For desktop, I want it to be like 225 pixels wide.

 

But on mobile, that looks WAY too big. Something like 175 pixels looks great on mobile (but is too small on desktop.)

 

Is there a bit of code I can add that will make it so that only on mobile, the logo is smaller, and I can customize the width for mobile-only?

 

Thanks!

 

My site URL is: https://nextlevelartwork.com/

 

—Anton

0 Likes
Highlighted
Shopify Partner
85 26 23

This is an accepted solution.

Please add the below lines at bottom of theme.scss

 

@media only screen and (max-width: 480px) {
.header-logo .lazyload__image-wrapper{
    max-width: 100px; // size of logo (increase or decrease based on your need)
}
}

 

 
You can find the theme.scss from Online store -> Actions ( Current theme ) -> Search (theme.scss)

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
0 Likes
Highlighted
Tourist
14 0 3

That didn't work, but a slight variation did:

 

@media only screen and (max-width: 450px) {
.site-header .header-logo {
max-width: 170px;

}
}

 

HOWEVER, for some reason this takes the logo from its previously centered position, to being pushed to the far left of the screen.

How do I center the logo on mobile only after making the above change?

 

Thanks!

0 Likes
Highlighted
Shopify Partner
85 26 23

Replace the css with

.site-header .header-logo {
max-width: 100px;
margin: 0 auto !important;
}
}


 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire us.
Feel free to Contact me for shopify help on support@prezentech.com
Shopify Design Changes | Shopify Custom Theme Design and Development | Shopify App Development
0 Likes