Responsive Collection List

Design help General
1

This is my first time using Collection Lists.

I’m not sure if it’s intentional, but my Collection List doesn’t respond down? On desktop I’ve set it to 4 columns, but on tablet it’s still showing 4 columns which is too cramped… I would have expected to respond down to 2 columns?

Screenshot 2020-01-15 at 14.32.25
Screenshot 2020-01-15 at 14.32.251961×728 391 KB

Screenshot 2020-01-15 at 14.32.31
Screenshot 2020-01-15 at 14.32.31791×745 149 KB

I tried following this tutorial, but a lot of the UI doesn’t look like what I am seeing? Columns | Webflow University

Essentially I want:

Desktop - 4 columns
Tablet - 2 columns
Mobile - 1 column

Any help greatly appreciated!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I would suggest to use display:flex on your collection list and percentages in your collection items, that way you have more control of the amount of elements being shown in the different breakpoints.

1 Like
3

That sorted it! Thank you!

1 Like