Changing columns & rows based on page width

Hi Forum,

I’ve made the change to the new responsive engine and it seems quite intuitive, except for one part where I am completely stuck. At the bottom of my page I have a 4 column repeating group to show recommended listings.

When I test that with a smaller width, the columns just get smaller.

What do I do here? Because when I change the group (in one column) width based on a page width condition, then the columns just overlap.

If someone can help, would be great.

Feike

You can define the minimum height of your row and the minimum width of your column in the Appearance tab. Like in the image below.

If you’ve enabled the Set fixed number of columns setting for the RG, then that’s exactly what you’ll get. The number of columns will remain the same regardless of page width.

You don’t explicitly state it, but it sounds like you want the number of columns to decrease and for the cells to stack on smaller devices - i.e. a more responsive behavior. To do that, you must DISable fixed number of columns and proceed as @rpetribu suggests.

Thanks! That solved it (partly).

I have it set up like this now:


But with 5 data entries to test, it shows all 5 while I just want it to show 4. This means that on desktop these columns are scaled down a bit too much and on mobile you get a vertically scrolling RG.

Do you know how to fix that?

Yes! You can do it directly in your Data sourcer.
Just add a :items untill #4 in the end of your Search.
This will bring just the first 4 items.

Search for Wonings:items untill #4

Ahh, thanks. I assumed it would have been in the RG itself. Thanks man! Appreciate it!

1 Like