Resize the logo for mobile

mobile.jpg

I have changed my logo through css override. Using the @media option i managed to resize the logo for mobile. However it displays a hughe black area on the mobile version. Is there something i am forgetting? My site is vepvoetbal.nl

Could you please post an url to your site?

Mentioned the url in the previous post: http://vepvoetbal.nl/

Oh sorry, I haven't seen it as it is plain text.
Could you please disable css compression for the time being so I can check which files makes this change?

Have disabled the compression in the template...

you have set some media-queries as a breakpoints, please modify "#gkLogo.cssLogo" element height to make it look better.

Have set the below in my override, but when adding a height att. is does not seem to be working. Am i overlooking something?


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

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

#gkLogo.cssLogo {
background-image: url('/images/siteimages/intro.jpg');
height: 150px;
width: 1080px;
margin: 0px 30px 0px 0px;

Please disable css compression so I can check it.

disabled compression again..

There is an importance in elements order. Please try this way:

Code: Select all

#gkLogo.cssLogo {
  background-image: url('/images/siteimages/intro.jpg');
  height: 150px;
  width: 1080px;
  margin: 0px 30px 0px 0px;
}
@media (max-width:1024px) {
  #gkLogo.cssLogo {
    margin-right: 0px;
    max-width: 80%;
    background-size: 80% !important;
  }
}
@media (max-width:820px) {
  #gkLogo.cssLogo {
    margin-right: 0px;
    max-width: 80%;
    background-size: 80% !important;
  }
}
@media only screen and (max-width: 620px) {
  #gkLogo.cssLogo {
    background: url("/images/siteimages/introsmall.jpg") !important;
    height: 86px;
    width: 620px;
  }
}
#gkFooterNav li {
  font-size: 14px;
}
#gkFooterNav a {
  color: #000;
}