Streaming live at 10am (PST)

Grid not allowing 1 column on mobile

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:
48

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!

1 Like