Stretched Logo on Mobile

LoriWalderich

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

Hey,

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

thanks

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

LoriWalderich

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

Could you send me the code you would recommend?

Pablo

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

Use it, and it will work fine.

Thanks

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