Responsive Issue #2: padding header background image

zmwartijn · June 2016

I'm having
some trouble getting the responsiveness working correctly on mobile devices.

The header background image looks fine on desktop use, but doesn't scale the way I would like it to
on mobile devices. The image takes up a lot of space as you can see in this
image:

https://dl.dropboxusercontent.com/u/902355/Issue_2.jpg

This is the
link to the site:

http://blonkwordpress.dynora.nl/index.php/expertise/

Any ideas on
how to decrease the height of the image on mobile devices, but keeping it on
desktop use?

Tnx.

Albert · June 2016

Background image won't never scale on mobile. It's technically impossible to make css backgrounds responsive.

Thanks!

zmwartijn · June 2016

Ok, too bad.

Is it possible to change the height of the background image easily?

tnx!

Albert · June 2016

Do you mean to change it's height on mobile only?

zmwartijn · June 2016

That would be ideal, but I understand that that's not possible.

So the height of the background image on both desktop and mobile.

Albert · June 2016

Ok. So to change it's height, please use the following css then:

body:not(.template-slider):not(.header-simple) #Header { min-height: 250px !important; }

zmwartijn · June 2016

perfect, tnx!

Albert · June 2016

You're welcome!

Responsive Issue #2: padding header background image

Comments

This website uses cookies