Logo Squashed in Mobile

[Bobby B.]

When my logo resizes for a mobile view, it gets squashed horizontally. See screenshot. Any ideas?

[Tahir – SUPPORT]

Hi,
You probably have to set the height to auto and set a width in the mobile media query. If you can provide the page link i might be able to give you some custom css.

Thanks
Tahir

[Bobby B.]

Here is just one example of the problem, though it is on every page of the site. View it in a mobile sized browser: http://minutemenministries.org/jimvangelderen/contact/

[Swift Ideas – Ed]

Hi Bobby,

Thanks for letting us know about that, I’ve added in some css to fix this in future updates. For now, you can add this custom css:

@media only screen and (max-width: 479px) {
	#logo img, #logo img.retina {
		height: auto!important;
	}
}

Hope that helps.

– Ed

[Bobby B.]

That certainly helped. However, the header height now looks too large–lots of empty space. Any way to get that to shrink, too?

[Swift Ideas – Ed]

Change the above to this:

@media only screen and (max-width: 767px) {
#logo a {
max-width: 75%
}    
#logo img, #logo img.retina {
        max-width: 100%;
        height: auto;
    }
#header-section > div {
height: 100px;
}
}

@media only screen and (max-width: 479px) {
#header-section > div {
height: 80px;
}
}

Hope that helps!

– Ed

[Bobby B.]

Hmmm…doesn’t seem to fix the empty space, though it did help with the mobile menu button placement. Also, when I get to mobile sizes, the “Personal Shopper” link appears. I didn’t think I had that enabled. See screenshots for examples.

[Swift Ideas – Ed]

You can disable the mobile personal shopper in Theme Options > Super Search Options.

Sorry, try this code:

@media only screen and (max-width: 767px) {
#logo a {
max-width: 75%
}    
#logo img, #logo img.retina {
        max-width: 100%;
        height: auto;
    }
#header-section > div {
height: 100px!important;
}
}

@media only screen and (max-width: 479px) {
#header-section > div {
height: 80px!important;
}
}

– Ed