Header taken over by lower elements in small screens

[mlsto]

Hello

Not sure what I am doing wrong but header shows properly in the large screen but in small screens the header if being covered by the elements on the bottom of the header.

This is the test page: https://www.sluhosting.com/test/

This is the test page in a mobile view: https://screenfly.org/#u=https%3A//www. ... 3&a=34&s=1

I created one with basic blocks and a header and it shows fine.

See here: https://www.sluhosting.com/new-test/

In mobile view: https://screenfly.org/#u=https%3A//www. ... 3&a=34&s=1

No idea what I am doing wrong.

Any help appreciated.

Thanks

[crispy68]

In your first link, the issue i see is the text in the blue section is huge in mobile and is wrapping forcing the rest of the text and button below outside of the grid. Since your grid is set to 100vh it will get no larger than this. You need to enable responsive fonts and in the breakpoints, adjust the height to keep all of the content inside the blue section.

Also, when your grid flips to mobile I can see a 1px snippet of your image in grid column 2 at the bottom of the blue section. If you do not want to show the image, then in the breakpoint when your grid flips to vertical you need to hide this column so it doesn't show.

[mlsto]

Thanks for the reply, I want the header image to collapse to the bottom so do want to show it

[crispy68]

Since you are using a background image for column 2 and there is no actual content in column 2 this will cause the column to collapse, try adding top and bottom padding equally just in column 2 only in the breakpoint. This will give that column some height to show the background image.

[mlsto]

Thanks will try this, thanks again