Making Grid responsive in mobile

Hi there!

I’m wondering how I can change my grid in different views. For example, I’d like to maybe make my grid items 3 columns in desktop view at a particular size and then adjust my grid to 2 columns in tablet and mobile view. I’d like the items in the grid in tablet and mobile views to be 1:1 square tiles and I’d also like to be able to adjust the white padding all around each tile, so as not to have the image go right to the edge of the screen. Any help would be super appreciated.

Here’s my link: Webflow - Diana Bernier Photography

here is the solution:
On the collection list 2 class there is an edit grid option, there you add 1 column in the desktop version and remove 1-1 column in the tablet and mobile versions.

Hi @Sridhar_S thanks for the screen recording, however, it doesn’t answer my question. I am looking to have 3 columns on desktop and 2 in mobile and then am also looking to understand how to change the dimensions of the grid for each view and add some padding all around.

1 Like

I think I’ve figured it. Thank you anyway.

1 Like