Flex Box: How to allign content in one column on mobile

I Need Help
1

I am using flex box to display some news on my website.

On desktop it work properly but on mobile the text next to the the image does not go underneath the image. Instead, it stays on the right.

How can I have the picture on top and the text underneath it on mobile?

Here are my settings and layout on desktop and what happen on mobile

Desktop Layout

Screenshot 2021-08-05 at 08.56.56
Screenshot 2021-08-05 at 08.56.562006×584 6.98 KB

Settings

Screenshot 2021-08-05 at 08.57.28
Screenshot 2021-08-05 at 08.57.281119×595 102 KB

Mobile (issue)

Screenshot 2021-08-05 at 08.57.56
Screenshot 2021-08-05 at 08.57.56355×725 7.68 KB

Many thanks in advance :pray: :pray:

2

I haven’t used flex yet, but it could be something as simple as adjusting the amount of columns in the right side inspector for the relevant boxes.
Set them to 12 and they should align how you’d like them.

1 Like
3

After you set display to flex, you need to set the flex styles under the last tab.

Screen Shot 2021-08-05 at 7.24.01 PM
Screen Shot 2021-08-05 at 7.24.01 PM766×900 107 KB

1 Like
4

Yop, that was :smiley:

Thanks guys!