Archived topic
How to get header image to scale with mobile
3 replies · Started by Leif on May 28, 2020
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 :(
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.
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!
Glad to hear that.
