Mobile Header and Logo Size

lscudder · August 2015

Hi,

I am having a few issues with the logo and header on mobile devices (iPhone 6 in Portrait - Landscape is fine) See the link for a screenshot.

http://imgur.com/bMPICoq

I have adjusted the logo and header sizes as the logo was being displayed to small across all devices. Now I have the right sizing for everything apart from on Portrait mobile devices.

Could you give me some help with the css on this one? Is it possible to target mobile devices specifically using media queries? As I don't want to affect the size across all devices.

It seems that the issue on mobiles is the padding on the left, but I can't seem to target that within the css.

I appreciate any support on this one.

My URL is;

https://www.ncsbusinesssolutions.co.uk/

Regards,

Luke

Albert · August 2015

Hi Luke,

it's because of the logo size. Your logo is too big for mobile devices and that's why logo cover the menu button. What you can do is decrease logo size on mobile devices and move the button to the right side. This can be done with below css:

@media only screen and (max-width: 479px) {
    #Top_bar .logo #logo { margin: 0 !important; }
    #Top_bar #logo { height: 50px !important; }
    #Header a.responsive-menu-toggle { right: -25px !important; top: 10px !important; }
}

But if above values are not good enough for you, then you must use own instead.

lscudder · August 2015

Thank you! That worked great - good work guys

Albert · August 2015

You're welcome

tschubarov · August 2015

Hey guys

Is 50px the ideal heigh of the logo? What is the ideal width/height (image size) for the logo?

Same question for the sticky logo.

Cheers, every day I love you more!

Albert · August 2015

@tschubarov There is no ideal logo size. Basically you can use any logo size you want. Also please notice, that logos may look different with different headers. So if logo won't be big enough, you can send us url to page where you want to increase logo and we'll help you

Mobile Header and Logo Size

Comments