Content overlap when shrinking the screen size

[davidlacle (David)]

Hello,

I’m new to webflow so I’m struggling with building my first landing page. So far I’ve been saving myself by looking into older posts, but now I’m stuck and don’t know how to solve this.

So basically on my landing page I have one section which contains 3 blocks (build with flex div blocks), but when I shrink the screen the 3 blocks overlap (see first image). How can I avoid them overlapping and instead making the blocks smaller so they stay at the same position?

A similar issue is with the approach section (see second image). I again used flex div blocks, but when shrinking the screen size my button is pushed down instead of shrinking.

Thanks for your help!

Here is my site Read-Only

[bryanmanio (Bryan Maniotakis)]

A few things you can do to help that layout.

Add left/right/bottom padding on those individual columns

Set children to wrap on the parent flex element.

You should set the height of those containers to auto as well, this will help them scale on different screen sizes.

[davidlacle (David)]

Thanks! This solves my issue with the 3 columns