Header logo disproportionall shrinked on mobile

webbabe

I have a rather wide logo in the header, but this looks disproportionally shrinked in width on a mobile device.

It looks like for example the height is 100% and the width 60% shrinked.

Is there a way to get this solved?

Bryan

Hello,

please send a link to this page so we can take a look.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

webbabe

Hi Bryan,

I have sent the details via PM at Codecanyon.

Bryan

Hey,

this logo is too big. The way it is calculated allows for a retina logo to be updated and there are a lot of other things connected to it.

The best way would be to create a smaller logo just for mobile, and upload it to theme options>resnponsive>header

You can also try this css, but its not perfect:

@media (max-width:960px) {
	body #Top_bar #logo img {
    height: auto !important;
}
a#logo {line-height:unset !important;}
#Top_bar a.responsive-menu-toggle { top: 60px !important;}
}

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

webbabe

Ah, good suggestion, didn't think of that - adding a separate mobile logo.

Thanks for the help so far!