Tagged: enfold logo
Hi guys,
I’m using a logo that’s 960×84. In Chrome, when I resize my window, the first time the logo resizes, it’s fine, but the second size (which is what I see on my iPhone) the logo is squeezed.
It looks like this is what I need to be tweaking – changing the height tag to something like 50px to keep the correct aspect ratio, and although it fixes the problem when the browser is at it’s narrowest, it also makes the logo tiny when the browser is normal width:
.responsive .logo a , .responsive .logo img{margin: 0 auto; max-width: 100%; height:80px !important; max-height:80px !important;}
I’ve searched the forums and haven’t been able to sort out a solution.
Thanks,
Paul
I managed to track down a solution that works in Chrome:
@media only screen and (max-width: 767px) {
.responsive #header_main .container {
height: 50px !important;
}
.responsive .logo a, .responsive .logo img, .responsive .logo {
height: auto !important;
max-height: 80px !important;
}
#advanced_menu_toggle, #advanced_menu_hide { top: 78%: }
}
The only issues at the moment are – the logo doesn’t resize to the smallest size in IE and the little menu box ends up on top of my logo.
-Paul
Hey Paul!
That’s not an issue, nobody uses IE with the window scaled to that size.
Regards,
Josue
Well, but in IE even at a width of around 800, it cuts off my logo.
Hi,
You’d need to tweak your code on your end, maybe changing the width of the query (767px). I don’t think we could help you with this ‘issue’, it’s extremely unlikely that someone uses IE on that environment.
Regards,
Josue