I’ve styled a large portion of my site using the grid layout, and am finding it difficult to make it work on mobile. For instance, in my footer I have a grid with three columns and one row. In the mobile verison, I want it to be three rows and one column. There are several other places like that on my site, but that’s probably the most straightforward example.
Originally, through watching the tutorials on Webflow University, I was under the impression that I could make a change on the mobile version and it wouldn’t affect the others - ie, that design flowed downwards. I’ve found though that when I do make a change on mobile (like moving a div or something) it changes the whole site.
Any insight into making the grids more responsive would be much appreciated!
I feel your pain! Went through a similar experience myself.
Things to note:
Grid. You can alter the layout of the grid by editing the ‘Parent Grid’ per viewport. You will notice that there are columns/rows are ‘Auto-Generated’ by grid depending on your content and viewport. You can delete or add rows as you please. For specific placement of elements, you can set a ‘manual’ override (within Grid settings) to span columns/rows as you please.
Styling of elements (CSS) does flow from larger viewport to smaller. Remember that styling and position of elements (example Div block) in the document flow will change on every viewport.
Hope that makes sense.
Let me know how you get on.
Keiran
EDIT: Here are some screenshots showing the grid layout change on mobile portrait only (not affecting layout in other viewports)
1 - Desktop
Hi Keiran - I’m going to tentatively say that worked, thank you so much! It’s odd - it messed things up on desktop when I tried earlier today, but not when I went back and did it again just now, so fingers crossed.
One thing I’d love to clarify - would you be able to explain further “styling and position of elements (example Div block) in the document flow will change on every viewport”? If I’m understanding correctly, does that mean that things within a larger section (for example, grid) can be moved around but the grid itself couldn’t? Just trying to figure out the path of least resistance for mobile.
You are correct regarding Grid. You can move items (child elements) within the grid (parent element) how you desire on each viewport (manual positioning - as per above comment), but you can’t move the grid itself without it affecting all viewports.
I’ve created a video to demonstrate the difference between styling and moving elements.
