Can't get flex box to stack vertically on mobile

Design help General
1

Hi folks,

My homepage is one giant flexbox made of 6 boxes (2 rows, 3 boxes each row). It looks ok on desktop and tablet but on mobile I want the boxes to stack on top of each other so that when you scroll there are 6 boxes lined up vertically. I’ve read through similar requests in the forum but can’t seem to figure it out. I have not corrected any of my pages for responsiveness yet, working on it.

My public share link is https://preview.webflow.com/preview/leeanne-mullins-design?preview=6218d517418cbf7fdb12779bbb7a3406

Thanks in advance
Leeanne

Here is my public share link: LINK
(how to access public share link)

2

Hi @Leeanne67

All you have to do, is select the Flex item and change the space you want it to fill on each breakpoint :slight_smile:

For desktop view, select the Flex item and give it 33.333% Flex Basis

1884×854 176 KB

For Tablet, I think 50% would do the trick

1461×666 119 KB

And from Mobile landscape and lower, give it 100% and it should show you 6 different boxes all aligned vertically :slight_smile:

1369×730 67.9 KB

**Just be aware that you need to select your “flex ittem” to preform those changes, since it’s the child of the flexbox **

3

Brilliant! A million thank you’s! Thank goodness for this forum :smiley: :smiley:

4

I’m glad it worked :slight_smile: