responsive header image

Hi Joshua,
On the next site when the screen width is below 600 pixels the header image on home page is not scaling anymore. What do you suggest, maybe disable image on small devices?
And how to target in css that image?

See this site: http://www.wehbergcommunicatie.nl

Thanks!

Hi,

Did you fix the issue? Because The header image is scaled on small devices. The css selector is:

Code: Select all

.gk-header-bg


Good morning Joshua, no I didn't do anything. Indeed image is scaling but on smaller devices like iPhone 4/5 problem; see also http://quirktools.com/screenfly/#u=http%3A//www.wehbergcommunicatie.nl/&w=320&h=480&a=33

Thanks!

The problem is caused by header padding - they are changed on tablet/mobile devices and the background image is also changed.

Try the following custom css code:

Code: Select all

@media(max-width: 500px) {
   .gk-header2 {
    padding: 80px 7%!important;
}
}


Generally it's a background image of the container - so it's not scaled like default <img ..>

Thanks Joshua! It was almost right, I changed 80 to 40 and now I am happy because it is perfect.