Changing logo size in header.liquid - Here is the code. Please help!

[quantumfzx11]

I really do appreciate your help by the way.

I tried a larger version of the image in 650 X 271. Still looks the same as hen using the smaller version of it.

It is driving me crazy. It looks good on desktop...but most of my traffic is mobile. I need it to look nice and crisp on mobile.

[quantumfzx11]

I think I found out what I need to do. I need to make the navigation bar the logo is sitting in to be a bit bigger.

Do you know how I can do this? Please :)

[quantumfzx11]

Well, I found out how to increase the size of the nav bar but that didn't seem to help at all..

I'm stumped. I will probably have to hire someone to fix this for me.

[JTR]

do you have a link to the site?

[JTR]

I've tested the code I sent you in a mobile and it works fine with a crisp logo, try clearing your cache on mobile safari/chrome, either way there's not a problem with the code based on the debutify theme I tested it on.

[quantumfzx11]

that's the website.

shoot. I'll even give you permission as a user for the back end if you think that will help.

I cleared the cache on my mobile safari browser and still have the same result.

[JTR · Accepted solution]

@media screen and (max-width: 590px) {
.site-header__logo .mobile-logo {
    display: none;
    }
}
@media screen and (max-width: 590px) {
.site-header__logo .default-logo {
    display: block;
    }
}

Add this to the bottom of theme.scss.liquid for some reason it's loading your logo at 96x40 for mobile instead of the 144x60 for desktop, since you're using the desktop logo accross all of the site I've turned the mobile logo off and told it to display the desktop logo in its place.

[quantumfzx11]

That seems to have done the trick.

Wow, is all I can say. Thanks for taking your time to help me out with this issue.

You deserve a gold medal.

Thanks so much.... god bless you!

[JTR]

No problem! make sure to mark the answer as correct so other people can easily find, thanks