Mobile header logo distortion

[Joni]

Hi,

Attached is my header in three different screen sizes. The mobile headers show some peculiar behaviour that I’m hoping to solve.

In tablet view, the logo is squeezed and in mobile, the bottom gets cut out.

Any idea what’s going on?

Thanks!

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Have you added a logo max height in theme options?

– Kyle

[Joni]

Yes,
The image size is 25px and the header is now set so that the max logo height in 25 + 40px padding on top and bottom = 105px that is now the container height.

[Kyle – SUPPORT]

The logo is fine for me at all sizes? I do not see any cropping of the logo

– Kyle

[Joni]

Strange. It behaves this way on my desktop browser (chrome) when I resize the browser window as well as with devices (iPad & iPhone)

[Rui Guerreiro – SUPPORT]

Hi,

Can you add the code below to your custom css option?

.full-center #logo{
max-width: 100%!important;
}

-Rui

[Joni]

Thanks Rui, that fixed the tablet view, but mobile still cut the logo from the bottom.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Can you try to add the code below.
Also clear the browser cache.

#mobile-logo.has-img {
height: 20px!important;
}

-Rui

[Joni]

Hi,
Still the same issue.

[Rui Guerreiro – SUPPORT]

Send you the wrong css property.

Try this one

#mobile-logo.has-img a {
line-height: 20px!important;
}

This is how it looks
https://www.dropbox.com/s/wdg4vp58cm434ca/2014-10-09%2014.30.33.png?dl=0

-Rui

[Joni]

Great, that one did it.
Thanks again!

[Rui Guerreiro – SUPPORT]

Great. No problem.
-Rui