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

Store Design
1

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

2

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)

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!

4

Replace the css with

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