Content inside a section overflows to other sections when resizing the browser window

Hi everyone. This is my first time posting here so I hope I am posting this in the correct place. I’ve had this problem that has been bugging me for a while now. I am redoing the tesla website just to get a bit of practice, the website consists of one section with a height of 100vh and another section which is directly under it. The real problem comes in when I try to resize the browser window. Whenever I do that, the content inside the first section (which is a text and a button positioned with Flexbox) overflows to the section below it. I’ve tried using min-height but that causes my flexbox elements (the button and the text) not to work properly, any suggestions on how can I fix this?

IMG of the problem (notice how the button is completely out of the first section)

Code -

Welcome to the forums @Mitrixsen.

You need to verify your addr with codepen so we can see it full view.

Since your images are local we cannot see them. You cannot load them to the free version of codepen. If you search there are a few places that will host your images for free and then you can link to them. Or you can put the images on GitHub if you’re familiar with it.

So with the limited look I can see of you page try adding the following to the top of the CSS editor (or your stylesheet). It will let you see how you have your elements laid out to help you with styling.

  border: solid 1px red;

Alternatively you can put that property: value; pair in any of your selectors (change color if you want) to see how it’s set up.

Hope that helps.

Hello, Roma. Thank you very much. I’ve tried to do the things you’ve mentioned and here is the result

As you can see, the button and the text completely overflow to the section below them when resizing the height. I’ve tried using overflow: auto; but that creates a scrollbar and doesn’t look very good.

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