Logo to big on mobile

Hi i had same problem with another template, the solution there was putting this in override:

@media (max-width:620px) {
#gkLogo.cssLogo {
margin-right: 0px;
max-width: 80%;
background-size: 100% !important;
}
}

This does not work for this template, is the code different?

Could you please post an url to your site?

yes, http://www.folkert.it/sl/

thanks

Here you have image type logo not css style logo, so the declaration needs to differ

Code: Select all

#gkLogo img {
max-width: 100%;
}


Ah ok

Even if i make the logo smaller, the menu on the iPhone is below the logo. It would look much nicer if it would next to the logo, same height.

See attachment.

vb1.JPG

Try adding:

Code: Select all

@media (max-width:640px) {
#gkLogo {
max-width: 220px;
}
}


reduce 220px if needed.
But from what I see, it looks fine in iPhone. Perhaps it is cache issue?

adding that code and reducing the 200px didnt make any difference.

I use the website http://ipadpeek.com/ to so how it look on iphone/ipad.

On a real iphone it looks better i have seen, but the menu is a bit lower then the logo. It would be nice if the are just at the same height.

Is that aside menu normal on the phones? In your other templates the mobile menus look different.

thanks

The site you are using isn't a valid ipad/iphone emulator. I have checked the site on live device and browserstack and all looks fine.

To modify mobile menu trigger's position, use media queries same as in my first tip, just add this code:

Code: Select all

#gkMobileMenu {
margin: 10px 0 9px 0!important;
}


and modify margin top (10px) and bottom (9px) for different screen sizes.

So override.css will look like this:

Code: Select all

/* Here you can include your override CSS styles */
@media (max-width:640px) {
#gkLogo {
max-width: 220px;
}
@media (max-width:620px) {
#gkMobileMenu {
margin: 10px 0 9px 0!important;
}
}

i think this works for me

Code: Select all

@media (max-width:620px) {
#gkLogo img {
max-width: 90%;
margin-top:14px;
}
}

This puts logo a bit lower next to menu

Sometimes the numbers require a little bit of teak.
Is there anything else I can help you with regarding this topic?

no sir! thanks!