How to get header image to scale with mobile

[Leif]

Hi there I can’t figure out how to get my hero image to scale on screen size (aka a small desktop or a mobile page).

Ideally the 1920px wide image would scale down for smaller screens then just float in the middle for larger screens

I removed the header element from my page because it looked crazy but it had it set with <br> inside just to have something in there and 16% padding-top and bottom (to hit the 600px image height at 1920px…which also seemed like a really kludgy way to make the image be there entirely. 🙁
But when I shrank my window it wouldn’t scale 🙁

[David]

Hi there,

that method you used for your Header Element is the correct method to make it responsive.
The only thing i would change is remove the <br> and in its place add a HTML comment eg.:

<!-- hero element -->

This will not display or occupy any space on the screen.

16% top and bottom padding looks correct.

Make sure you DO NOT have any values in the Mobile padding.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leif]

Wierd except for the BR that’s what thought I had.
I did discover a way to make full-page responsive elements in Gutenberg and just used that to get around the issue.

Thanks though!

[David]

Glad to hear that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts