Landing Page - Items Below Flexbox Not Wrapping


I am stuck and not sure how to fix this problem - the video section “Experience It” immediately after the flexbox I’ve created is not getting pushed below the last gray box that is part of my “Pricing” section, when I shrink the browser width.

I’ve gotten the boxes within my flex container to wrap fine, it’s just the items below it are now overlapping the boxes (see photo below):

Here is my codepen link

The first thing I would recommend is that you clean up the HTML. Use codepen’s Analyze HTML feature to see all of the issues you currently have. Also, there is no HTML tag <pricing>.

Whenever I see something like this happening I immediately start to look for height set on elements. That is usually why this happens.

Here it is caused by the height on #Pricing and the height on each of the #box-1, #box-2, #box-3 elements.

@bbsmooth thank you for that suggestion and reviewing my code. I learned so much from taking a look at all my errors!

@lasjorg yes! That fixed it right up and I will definitely keep that in mind if it happens again. Thank you :slight_smile:

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