Media query for the Repeating group element

ficatsuh · February 1, 2022, 4:25pm

I want to build a repeating group that has 3 columns in laptop mode. And be responsive. So if I use a mobile, the repeating group will only display 1 column per row.

In CSS, I used the grid-template-columns attributes in conjunction with the @media-query.

Here, the grid column 1 and 2 are overlapping with each other when I tried to resize my window.

sudsy · February 1, 2022, 4:50pm

Your question seems very similar to this one.

ficatsuh · February 2, 2022, 4:56pm

I followed the suggestion from the separate thread. Mine doesn’t work as expected.

As you can here, the column 1 is cut because it overflowed over the RG container.

sudsy · February 2, 2022, 4:59pm

Maybe check the layout type and min width of the elements within each cell.

ficatsuh · February 3, 2022, 3:56pm

I’ve found it. I changed the min-width of my main container to 300px (from 1080px).

Would you know Steve, how can I change the default “auto-fill” to auto-fit?

Here, thru the inspection element I changed it to auto-fit.

Thanks for your help, by the way.