Mobile Header and Logo Size

lscudder

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

lscudder

Thank you! That worked great - good work guys

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

tschubarov

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

@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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next