I have a 2 column grid on desktop and want it to change to 1 column on mobile. I manually deleted 1 column in the mobile breakpoint, but it still has 2 columns (see screenshot). The right-most column is faded, but content is still gowing into it.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi @Ben_Sash
Some of your content in the grid has values that it is using more than one column span.
This is your current setting where Div Block 11 has a column span of 2:
When you change this to 1, you will fix the issue:
I suggest to make use of the Grid Areas as well to better control the content within your grid, for more info about this check the following article:
PS. If you work with many columns within a grid and you see that your grid is becoming bigger than your viewport on smaller screens, set your grid’s width to 100%.
Thanks!
Regarding grid areas, I just read the article. Thanks for linking it! It seems like the same thing I’ve been using. No?
When I look at your Projects Template page and checking out how you setup any grid, I can’t see any reference that you have been using the grid areas. You can make specific areas in a grid and tell component within that grid to fit within that specific area.
At the moment in your case I don’t see any Grid Areas defined, see screenshot (“No Areas”)
When you do create the Areas, the Grid settings will look something like this:
Once you’ve setup the Grid Areas, you can the elements within the grid that they should fit to a specific area, e.g. by editing the grid child settings and choose for ‘Position’ > ‘Area’.
In your Elements Navigator you can see which elements have been connected to a grid area by the grid area icon #, see below:
Hope this clears things up a bit, otherwise take your time to check the link I sent in my previous message.
Thanks, I see what you mean now!
This is 4 years later, but ran into this today and Reinier’s solution was a big help. Had a two column grid that would not reduce to 1 column on mobile screen sizes. Turns out the areas still reflected two columns. After deleting the areas in the grid that were explicitly set to column 2 the grid now functions properly.
