Stupid question on grids

Elements
1

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 length must be extended (ie. from 4 products across to 3 when you have say 16 total).

Do I set it up as a grid of 16 wide by one high and adjust from there according to required format ?

Sorry it that’s a daft question

Jol

2

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.

3

@jbob

is this what you mean

mobile first

4

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:

5

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

6

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 me?)

Meaning I can now only have 12 products, right ?

This can’t be right - can it ?

I think the use of a slider here is fantastic - but isn’t it artificially limiting my grid to 12 x 12 ?

I actually want 1 across by 30 down for mobiles - in this case (some may want more).

Thanks, Jol

7

Further - with my 30 product (3x10) …

… if I adjust for mobile at 1 product across

then they start overwriting themselves

image
image253×712 79.6 KB

8

@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

9

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

10

Thank you Steve - great explanation

11

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

12

Nope - really happy here Steve - you’ve been an enormous help !!

I’d love to show you

However I cant upload it as the page just shows this ..

image
image1025×753 1.85 KB

13

If I export to my local drive and preview the print_shop.html by pressing the keyboard space bar … it shows the same … so somehow it looks fine in RWE but crappola once exported from RWE

14

I started another thread about it here

15

I mean in Elements, snapshot and just post here, copy and paste

16

image
image1135×655 216 KB

image
image628×827 116 KB

17

I’m pretty happy with progress Steve - thanks to you !!

(although as you see in the next image I still have big spaces between rows

image
image1583×917 157 KB

18

My bigger problem now is that although it looks great on my screen - the export / and / or upload results in this big black empty box

..

19

I think it’s an error with globals ? - as only my initial page ( Peter Yates, Artist and Architect 1920-1982 ) displays the full header

20

I use show outlines to check position etc