Logo Size on Mobile

I have added logo to this site that is 500px wide but this does not resize enough on the mobile display to fit on the screen. Under some circumstances this seems to break the display.

http://www.milkfashions.com.au

any idea on how to resize this in the mobile display?

Cheers

I would suggest to use media-queries in override.css to set element width to smaller when browser reach any of given steps (can be checked in header source codue).

Thanks, I get what you mean, but have no idea of the css to restrict this just to the mobile logo.

Any ideas?

Code: Select all

@media all and (max-width: 800px) {
  #gkLogo {
    width: 80%;
  }
}

@media all and (max-width: 600px) {
  #gkLogo {
    width: 60%;
  }
}


You can use it in override.css.
For specific sizes to use with max-width, You can view sites source and search for css are being included with use of that particular media-query.

Thanks for you help Got it and learnt a little more css in the process.

Its always best if You learn something new while doing usual stuff .