Logo size mobile

Hi,

On http://www.folkert.it/rmf/ i have 2 logo's. The first one is bigger, its shown when you enter the page (logo.png).

The second one is a bit smaller (logo_negative.png), you can see this when scrolling down.

Now when i look on my mobile, the logo doesn't fit. Where can i change this?

I tried to look in mobile.css. Strange thing is, when i edit or even remove mobile.css, this has no effects on how the website is being displayed on my mobile (i deleted cache/history). Why is that?

thx

Please edit: /templates/gk_cloudhost/css/override.css and add at its end:

Code: Select all

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


Remember to enable "CSS override" in template settings - advanced section.

Thanks Cyberek,

This works fine for the first page (homepage) on mobile, but the other pages still have a logo thats to big.

I guess its something with

#gkLogo.cssLogo, #gkMenuWrap #gkLogo.cssLogo {

I would prefer that the logo (and menu) would look the same on all mobile pages.

Thanks again!

Ok, please replace css code with:

Code: Select all

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


You are also missing one closing '}' in your current override.css

thanks that works.

Without that missing closing } is did change the css, but i added it to be sure!

It should work fine right now, but missing closing "}" might cause problems if you would decide to add additional definitions to override.css. There must be always one "}" for each "{" before it.

ok thanks for help en tip!