I am building a landing page with 3 sections (haven't coded the 3rd section yet).

Each section needs to be 100% of the screen.

Top 2 sections have 2 columns each.

I am using Flexbox for this, and everything looks great as long as the browser is in full screen, and the sections have no content. When I start adding content inside the sections, then resize the window, sections start overlapping, especially when resizing only vertically.

When resizing horizontally it's not a problem, since I can switch flex-direction:column; to flex-direction:row; to get them to stack.

How can I get a 100% view of the section while making everything responsive when window is resized and prevent overlap?

Would CSS Grid be a better option here?

Here's a Code Pen. Please slide the code pane up, then resize your window, and you'll notice how the second section overlaps on top of the first section's button, text, and image. Code Pen: https://codepen.io/MarwanAK10/pen/eYedLoZ

If you try removing the button, paragraph, and image from the html, then the problem is gone, and on resize the sections don't overlap...

Thanks!

CodePudding user response：

You can use @media queries for different size screens. So you can display everything differently depending on the screen size. You can view the documentation here.

CodePudding user response：

Maybe put overflow:hidden on section