There has to be a better way! [grid layout design]

[alejandrowunderlich]

RG with multiple columns to create an online store just doesn’t cut it. It doesn’t resize well, it has to be fixed width so it doesn’t work with mobile (most of traffic), and it’s buggy.

I’m working on an online store of sorts. What’s the best way to create a responsive grid layout that just works?

Think amazon:

I’ve scoured the plugin section to see if there’s something there but can’t find much. There’s not much on the forums either. Am I the only one?

Thanks for your help guys!

[solinz]

The page itself is not fix width. So it is responsive… there are tab to check responsive page for different page widths.
Put group inside RG (one raw 6 col)

inside RG that is not fixed width for each cell put group or groups with fixed with or minimum width or percentage… you can’t tell what suites best you have to try yourself.

[brett.miles]

Yep, just requires investing a lot of time to learn the responsive settings - and a bit of trial and error

[alejandrowunderlich]

Thanks for taking the time to help me!

I’ve played a lot with the responsive settings. The RG with columns just doesn’t seem to work.

Arrangement:

• Large, full width RG with 3 columns, not fixed width
• Inside is my product cell group with picture, title and price. 380px wide.

In the designer, it appears to work, but when I preview it, it displays as just 2 columns. Here’s my settings:

But when I preview:

Help would be much appreciated!

[solinz]

in the main repeating group. cell min width is 0 now. set it to be the min which is 399 or even less and try.
better to group Main Repeating group so you have MAIN group inside it there is RG then cell group.

[kaanaksoy81]

@alejandrowunderlich

RG with columns

I think @solinz gave the correct answer but I also agree that Bubble’s responsive design is quite cumbersome and requires lots of tweaking.

[despega]

Thanks for your help @solinz @kaanaksoy81

Adding a minimum width doesn’t seem to do any difference. Still only shows 2 cells and in designer mode it shows 3.

I don’t quite understand what you’re suggesting @solinz. You mean I should place the product RG INSIDE a group?

GROUP —> RG —> CELL?

And what properties would that group have? Fixed width, etc?

Thanks again!

[kaanaksoy81]

I think he advised to put everything in a group.

Group should be responsive.

Can you record your screen while testing the layout both in preview and responsive section.

[solinz]

Yes i meant what @kaanaksoy81 said.

This setting works for me simple. make sure the Cell Group inside RG is centered.