Am wondering what the correct structure would be for a shop where you might want 4 product items side-by-side on a big screen and only one on a phone. Is it a grid which changes the number of columns based on the format ? How then is the ‘overflow’ achieved when the grid width is reduced, but the …

The grid has 12 columns, so I would do 8x2 or 4x4 on large screens. When you put it together in Elements, figure out how you want it laid out first, then design mobile first (as that is how Elements is designed). It will be w WHOLE lot easier that way.

@jbob is this what you mean mobile first

Hi @jbob A Grid sounds like the correct component for this :smiley: Steve’s video above shows him setting up a responsive grid, but if you need more information on responsive settings, you can check out the video here . If you get stuck just let us know and we’ll be happy to help :slight_smile:

Thanks Steve and thanks Ben - exactly what I needed !!

Steve, Ben A grid may be defined as big as 12 x 12, right ? That means that a grid can have 144 products (for example) Mine has 3 across by 10 high … grand total 30 products - for a desktop screen However, when I define for a cell phone at 1 product across … I am limited into 12 rows (following …

Further - with my 30 product (3x10) … … if I adjust for mobile at 1 product across then they start overwriting themselves [image]

@jbob this is working with the max of 12 cols, but this is using auto row not defining a grid in number of rows, see how many rows here

How did you build your single container, need to make that responsive as well

Thank you Steve - great explanation

Could you show before you reduced to mobile view what does that look like, I was using images they scale automatically other content may not do that

Stupid question on grids

Elements

jbob (jol yates) September 18, 2025, 9:56am 14

I started another thread about it here