Responsive Grid - not stacking on mobile - WHY?

Design help General
1

Hello Weblow. Searched for an answer to this but couldn’t figure it out. I’m trying to to a very simple grid 1 x 2 (row x column) grid layout. Image in a div on the left, text in a div on the right.

I would like the grid to stack in mobile so that it goes to 2 x 1 layout (row x column). BUT it’s not working and I’m not sure why. Would appreciate a nudge in the right direction.

Explained in this video:
https://www.loom.com/share/643bd0b1fa5e4450853476c3b65e0a37

https://preview.webflow.com/preview/rhythm-nutrition-rn?utm_medium=preview_link&utm_source=designer&utm_content=rhythm-nutrition-rn&preview=1774b8124c382d4b46e4ee741fad79a2&pageId=5f3d3e11cd3540219e87fc23&itemId=5f3d3e8362311a45481c6833&mode=preview

2

Oh my, finally something I know the answer to.

If you go to the mobile portrait viewport and select your grid element you can click the edit grid button. Simply remove the 0.75 column that contains your image and the grid will change to a 1 column 1 row on mobile portrait only, adding more rows automatically. (Indicated by the blue color on columns)

Hope this helps!

3 Likes
3

Geffrey you BEAUTY!!!

Thank youuuuuuuu

4

It help me also. Stuck in for a day and your answer helped me.
Thanks a lot😊

5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.