Columns of a repeating group in responsive design

Need help Responsiveness
1

I have a repeating group (layout Ext. vertical scrolling) that has 3 columns.

I was wondering if it would be possible to setup the responsive design in a way where if the page width gets smaller than say 600px it shows 2 columns and when it gets to <350px it shows one column?

2

Iā€™m not sure how to do 2 conditions like that, but if you make your minimum width set to half of the smallest value it will get you close to what you want. Minimum width = 175px means there will be 2 columns at 350px, and only 1 column at 349px. This would mean that 3 columns would show until you get down to 525px though, and at 524px change to 2 columns, which I know is different than what you want.

1 Like
3

It should be possible to do that with a bit of custom CSS:
@media (max-width:600px){
.column{ width:50%; }
}
@media (max-width:350px){
.column{width:100%; }
}

1 Like