Making a div block responsive for mobile and tablet

Hi everybody

I made this video to showcase my problem, and how I’d like the solution to be. I am a beginner at Webflow, so I understand this might not be the most technical issue.

I want to make it as shown in the second example, where the icon columns simple drop down under each other. Where am I going wrong here?

> Here is my read-only link.

Hi Kaan!

All you’ll need to do to get this to work is to set your Flex direction on Div Block 2 to be Flex Direction: Vertical with one of the mobile breakpoints selected (whichever exact breakpoint you’d like to set it to start stacking vertically)!

Step 1: Select Div 2 Block, and go to the Mobile Portrait breakpoint :

Step 2: Under ‘Layout’, set the Direction to “Vertical”

You’ll notice that when switching back to desktop it goes back to stacking horizontal, and only for Mobile the content will stack vertically. This is because changes flow downward from the default desktop breakpoint.

Making changes to these settings with a lower breakpoint selected will only flow down to smaller breakpoints, rather than upwards to the default desktop breakpoint (or higher). So it won’t ruin any of the hard work you’ve done on the desktop version! Same goes if you were to resize/reposition some of the elements :slight_smile:

There’s a lesson on Webflow University about this if you wanted to learn about it in more detail:

2 Likes

Thank you very much for your help Josh this was exactly what I needed :slight_smile:

Not a problem at all! Glad I could help :handshake: