Change Number of Columns in RG When Page Width Changes

Need help Responsiveness
1

Hi Everyone,

There is something I am stuck on with the new responsive settings, which used to happen automatically if I am not mistaken.

I have a repeating group with 3 columns. However, as the page width decreases, I would like the number of columns to decrease to two, so that the RG cells do not overlap with each other.

Is there a way to achieve this?

Thanks!

2

Assuming your RG ha a fixed number of columns, just use add a condition to change the number of columns to 2 when then page width is less than the desired width.

If your RG doesn’t have a fixed number of columns, then you’ll need to set your column minimum widths, and RG (and container element) max widths accordingly.

3

Thanks, that makes sense to me. I will try that solution. I assume I have to set the minimum cell width in pixels, rather than as a %, which may be what is causing the issue as well.

I love the new components/responsiveness system, but this is one thing that just worked out of the box with the original system that appears to have been removed, surprisingly.

4

you could also use the function of an rg to display items as a masonry grid and fit the cells to their width or height