Dynamic header resizes and covers content (solved)

My header doubles in height as the page width decreases below 100% (way too early but that’s another issue) covering the top lines of text in my page. Can’t see how to fix this.

1 Like

Can you give a link for us to look at? It’s a bit difficult whit out seeing what settings you have

https://viozel.com/index

On my browser it doesn’t cover the contents but it does push it down. If you want to you can place the image in a container, set the container to not be visible if page width < x and the containers height to be hidden when not visible.

On pages where it is important text rather than just part of the image that is obscured by the resizing header I need something else I think. I can just leave a blank area at the top of every page as a work around but I’d really like all page elements to move down dynamically corresponding with the increased header height. Any ideas?

I ended up redesigning the header layout so that the elements are on different vertical bands and so do not effect each other.