Header Responsive Issues

Hi, I’m having some issues with setting up the header image with two columns of text on top of the hero image. It all looks fine on desktop, however on mobile, the text overlaps the section following the header image.

My website is: https://elyde.co.uk/?ign_skip=7350770576082

Thank you,
Amy

Hello Amy,

Thanks for writing in! The spacing or overlapping as what you call it is caused by your 308 pixel top and bottom padding. Since you have set to have the height to 100vh, please use percent padding instead. I would recommend that instead of using height: 100vh;, please use min-height:100vh; instead.

Hope this helps.

Hi thank you for your reply, I added the min-height in, however if I take the padding off, the text goes behind the header now and can’t be seen almost at all on desktop.

Can you please advise?

Thank you

Apologies, I’ve sorted it by adding padding as percentage.

Thank you a bunch for your help

You’re welcome!
We’re glad we were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.