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.
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%.
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!