Manage views and layout

Design help General
1

Hello guys,

https://preview.webflow.com/preview/la-boulangerie-francaise?utm_medium=preview_link&utm_source=designer&utm_content=la-boulangerie-francaise&preview=00e5108ffd3cfd9a093e9215aac1d9b3&pageId=6300e38ee2abc54b67bf4b19&workflow=preview

Let me explain my situation, I created a carousel of products one on top of the other in the views (tablet and computers) and on tel it gives one on top of the other.

But as I put flexbox it gives as follows:

Capture d'écran 2022-08-31 à 15.18.35 PM
Capture d'écran 2022-08-31 à 15.18.35 PM1742×1854 95.4 KB

Capture d'écran 2022-08-31 à 15.18.22 PM
Capture d'écran 2022-08-31 à 15.18.22 PM1920×1193 77 KB

And I would like to make the image always on top and the text on the bottom, but with the different views and layout I can’t find the right combination.

Thanks for your help:)

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey those picture are making me hungry lol but here is a quick fix to get your desired layout. The easiest way to do this is the following: Loom Video

You’re going to utilize the flex reverse property the two arrows next to horizontal or vertical in the designer. So I would add a class of mobile: flex swap to every flexbox wrapper that you need to reverse on mobile and then I would click the reverse button on Mobile Landscape and they should stack properly :slight_smile:

CleanShot 2022-08-31 at 07.35.15@2x
CleanShot 2022-08-31 at 07.35.15@2x478×780 61.4 KB

1 Like
3

If you use flexbox and put vertically allign it should allign everything, vertically.

4

Thanks you very much Austin!
It’s work, have a great day:)

1 Like