mobile responsive logo size

HouseofStrauss · July 2015

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/

Albert · July 2015

Hi,

to increase logo size on mobile, you must use below css:

@media only screen and (max-width: 767px)  { #Header_creative #Top_bar #logo { height: 200px !important; } }

HouseofStrauss · July 2015

That works brilliantly on phones, thanks for your quick response. There is a further issue with the ipad. The logo hangs over the header. Looks like it needs a different logo for the mobile devices

Albert · July 2015

You're welcome

HouseofStrauss · July 2015

Did you see my question about the ipad??? "There is a further issue with the ipad. The logo hangs over the header.
Looks like it needs a different logo for the mobile devices"

Albert · July 2015

Yes, we see what happen but it is not possible to have different logo for ipad. You can only decrease logo size for ipads. That's the only solution in this case and you can do this with below css:

@media only screen and (min-width: 768px) and (max-width: 1239px) { #Header_creative #Top_bar #logo { height: 50px !important; } }

HouseofStrauss · July 2015

Thank-you for your response. That code addition does not work, sorry... Logo still overlaps content on the ipad. (cache is empty) anything else I can do?

Thank-you

Albert · July 2015

Ok. So please try below css instead:

@media only screen and (min-width: 768px) and (max-width: 1239px) { #Header_creative #Top_bar .logo #logo img { max-height: 50px !important; } }

HouseofStrauss · July 2015

Ok, thank-you, but sorry that has not resolved the problem with the ipad (cache all cleared)

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; }

----------//------------

Albert · July 2015

It does not work because 2nd declaration is 215px with !important as well and that's why css does not work. So or you will remove !important from 2nd declaration or you will use below css instead:

@media only screen and (min-width: 768px) and (max-width: 1239px) { .body #Header_creative #Top_bar .logo #logo img { max-height: 50px !important; } }

to make this declaration stronger.

HouseofStrauss · July 2015

So I have changed it to this below and it now shrinks the logo to 50px on both phones and the ipad. Unfortunately, this is NOT a good option as the logo looks tiny on both screens. These sidebar menus really suit a square type of logo because they are narrow, but those logos fail to work properly on smaller screens. I think you should really make an option for a second small screen logo, or be able to use the sticky menu version. What I have now looks great on a normal screen but is useless on small screens. I would like for you to show me a better solution, as this logo is now the clients branding and we can't change it.

@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; }/*

Albert · July 2015

At this moment we do not have better solution. That's the only one we got now.

HouseofStrauss · July 2015

Ok, I'm not done with this yet.

as an idea, can you see any reason why this would not work. I'm trying to call a different logo for different viewport size.

@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...

Albert · July 2015

Logo works as html image, not css background so this css won't work in this case.

HouseofStrauss · July 2015

Ok, thanks... maybe you could consider a mobile logo option as something to add in updates, as the tablet viewport screws things up and we are restricted to a 50px height .

Thank-you.

Albert · July 2015

With recent update we added an option to set different logo for mobile devices. After theme update, you can set logo for mobile devices under Theme options > Responsive section.

HouseofStrauss · July 2015

WOW! I'm impressed. Thank-you for that update and notifying me.

Albert · July 2015

You're welcome

mobile responsive logo size

Comments