Responsive Logo Issues

[bn86]

Hey,

I’m finding some pretty serious logo issues here. I’ve entered 70 in the Logo Max Height field, yet the logo is stretching wider at each break point. The logo has the correct proportions at mobile width (tested on a Mac in Safari and Chrome)

Also, at smaller break points in Chrome, the logo breaks out of the header entirely and shows up really big! :/

Hope there’s a quick fix!

[Rui Guerreiro – SUPPORT]

Hi,

Try to fix that adding the code below to your custom css option.

#mobile-logo img {
height: 70px!important;
}

-Rui

[bn86]

Thanks, that fixes the second issue on Chrome.

But, the main problem is still there. At each break point, the logo is stretched wider and wider… i.e. at the mobile width, the logo is fine. But at tablet and desktop sizes the logo stretches considerably.

Any ideas?

[bn86]

I notice in firebug the following code:

#logo img.retina {
width: 184px;
}

Where did that width come from? If I disable that width property, the logo displays at the correct width. At a smaller browser width, the logo is 157.500px wide, and with the site at full width the logo displays at 184px wide. Neither of those widths are correct – they are both stretched.

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[bn86]

Ah sorry, I should have mentioned I’m on a retina display here. I think it is working fine on a standard display, but something is strange with the retina code…

[bn86]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Here’s your issue:

Your standard logo is 184px x 100px, yet you’ve set the max height to 70px, when it should be 100px. The max height property is only for preventing the retina logo from showing bigger.

If you change your max height to 100px is should work fine

– Kyle

[bn86]

Thanks Kyle,

That fixed it. I had assumed that changing the max height would restrict the height, keeping the logo in proportion. I now realise I should make the logo the right height in the first place.

Cheers

[bn86]

This reply has been marked as private.

[Kyle – SUPPORT]

Done 🙂

[ecollective]

I am having a similar issue on a retina display – the logo is stretched even though my max height is correct at 75. Any suggestions? http://ecollectivedesign.com/

[Kyle – SUPPORT]

Try adding this to your custom css:

.full-center #logo {
  max-width: 55%;
}

– Kyle

[miguelsoler]

Estimated kyle
in my case It’s the same, I tried your advices, but still not work for me, the logo is distorted on the tablet.
Any suggestions?

http://www.dubuloj.com

[Rui Guerreiro – SUPPORT]

Hi,

Can you a take a screenshot it doesn’t look distort to me. Clear the cache browser first.

-Rui