Forum Academy Marketplace Showcase Pricing Features

Media query for the Repeating group element

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.

Your question seems very similar to this one.

1 Like

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.

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

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.