Hey all!
I need help with making an asymmetrical layout section on my page responsive. This is how it looks like on desktop:
I tried to make Grid 2 have only one column on mobile, but since the layout’s different for each row on Grid 1, it ends up looking like this:
The first row is okay, but the second is not. I wanna make it so that Grid 2 has the image on top for each row, and not alternate on smaller breakpoints (mobile). Is there a way to do this or do I need to rethink my structure?
You can do this in 2 main ways!
Select that second image and in the style panel, you can set the grid position of the image to manual. From here you can set the Row Start/End to be 1 (rather than it currently being 2 I presume). This will move it above the text.
Alternatively, on mobile view, change the grid to vertical flexbox. Then you can have a secondary class on the grid such as “is-flipped” and you can reverse the order of the flexbox child elements, which would put it on top! (The button for this is next to the Horizontal/Vertical options)
Let me know if that makes sense!
For this layout, it’s probably easier to use flex, which has a direction property.
Flex1 would be horizontal, laid out how you want
Flex2 ( or a subclass ) would be horizontal, reversed
The children of both flexes would be ordered image DIV, then text content DIV.
Then at mobile breakpoints, change the reversed property, and it will layout the same as the first one.
Yep that makes sense! I discovered the first option not long after I posted by just playing around with the layout a bit more, but still wanted to see if there were other options. Thanks so much!
