Stretched Logo on Mobile

LoriWalderich · January 2020

I want the logo on the mobile phone version of the site to be larger. I have selected 'Minimal' in the Responsive Header options.

The problem is that my top logo is stretching. It needs to be proportionate.

http://www.lionheartoutdoors.com/2019/

Here is the css I'm using:

@media only screen and (max-width: 500px) { 
    #Top_bar #logo img { 
        max-height: 80px !important;
        margin-top:-20px !important;
        margin-left:-30px !important;
    }
}

@media only screen and (max-width: 500px) {#Top_bar {
    height:auto !important;
	padding-top:5px !important;
	padding-bottom:5px !important;
    }
}

Please help!

Bryan · January 2020

Hey,

your custom CSS is streching the logo. It best to change the logo size using max-height, not width.

thanks

LoriWalderich · February 2020

I tried adjusting the height instead of the width. No effect on mobile.

Could you send me the code you would recommend?

Pablo · February 2020

I've changed your CSS code in the first answer.

Use it, and it will work fine.

Thanks

Stretched Logo on Mobile

Comments