mobile responsive logo size
This is ONLY a mobile problem both android and iphone
when viewing the site vertical mode in mobile phone, the logo is cut off and when the menu is activated it is overlapped by the logo
The logo size is 260x212 and the header is in 'creative always open' setting. NOTE: Looks fine on desktop.
Because there is no separate logo option for mobile I have placed the following in the custom CSS
#Top_bar #logo {
display: block;
height: 200px;
line-height: 60px;
padding: 15px 0;
}
#Header_creative #Top_bar .logo #logo img { max-height: 215px !important; }
However this does not fix the problem. Can you please help
url http://zellirock.staging.wpengine.com/
when viewing the site vertical mode in mobile phone, the logo is cut off and when the menu is activated it is overlapped by the logo
The logo size is 260x212 and the header is in 'creative always open' setting. NOTE: Looks fine on desktop.
Because there is no separate logo option for mobile I have placed the following in the custom CSS
#Top_bar #logo {
display: block;
height: 200px;
line-height: 60px;
padding: 15px 0;
}
#Header_creative #Top_bar .logo #logo img { max-height: 215px !important; }
However this does not fix the problem. Can you please help
url http://zellirock.staging.wpengine.com/
Comments
to increase logo size on mobile, you must use below css:
Looks like it needs a different logo for the mobile devices"
Thank-you
Here is my full additional CSS, can you please check it to see if it's correct? my logo size is 250x204px
-------------//------------
@media only screen and (min-width: 768px) and (max-width: 1239px) { #Header_creative #Top_bar .logo #logo img { max-height: 50px !important; } }
#Top_bar #logo {
display: block;
height: 200px;
line-height: 60px;
padding: 15px 0;
}
#Header_creative #Top_bar .logo #logo img { max-height: 215px !important; }
----------//------------
@media only screen and (min-width: 768px) and (max-width: 1239px) { .body #Header_creative #Top_bar .logo #logo img { max-height: 50px !important; } }
#Top_bar #logo {
display: block;
height: 200px;
line-height: 60px;
padding: 15px 0;
}
*/#Header_creative #Top_bar .logo #logo img { max-height: 215px; }/*
@media only screen and (min-width: 768px) and (max-width: 1239px) {
.body #Header_creative #Top_bar .logo #logo img
{background: url(images/logo-responsive.png)
max-height: 50px !important; } }
Your comments appreciated...
Thank-you.