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 ๐
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.