Weird height issue on some browsers

Hi,

I’ve been trying to fix a layout problem with no luck for the whole day. I hope that someone might have an answer.

On the page below, the section right after the hero overlaps on some computers but not on others. It’s unclear why.

To solve this for now I’ve added a 30vh div block right after the hero. Now there’s no overlap, but there are some screens where there’s way too much space.

Not sure what I’m missing. Hope someone can help.

Thanks!

Website
https://preview.webflow.com/preview/protocol-international?utm_medium=preview_link&utm_source=designer&utm_content=protocol-international&preview=8e3567fddf644cd86a2c0f59d64f298d&workflow=preview

Hi Pitz,

I hope you are well. Thanks for posting your question in the forum, I understand you’re struggling with the height of some of your containers and are using div blocks to create spaces.

This is a great way of creating space, although there is another way which I find easier. Firstly I created a new container inside the centre wrapper and inserted the heading and text into this (you can also eliminate the wrapper and centre the container too if you choose to).

webflow-containers

From there I add padding to the top and bottom of the container to create space.

webflow-settings

There’s a great article on the Webflow University if you wanted to learn more about spacing.

I hope that helps, if you need anymore help - just let me know!