Streaming live at 10am (PST)

Varying limit items for a collection depending size

Hello!

I am trying to change the amount of items displayed depending on the device size.

For example: In desktop view I have limited the CMS collection on view to 3 items. As the device size decreases, say to an tablet view, I would like to change the limit to 2 items.

But it is not letting me. Whenever I change the limit, in whatever device size, it changes across all sizes.

Am I doing something wrong? Is there something I don’t know about? Is it a bug? If all of them are a no, can I request this, please?

Thanks,
apksprofree

Hi @Muhammad_Saleem, thanks for your post and welcome to the community :slight_smile:

It is not possible at the moment to change the number of columns in the collection list for different viewports.

What you can do though is set the collection list to single single column full width, then set the Collection List to 100% and set each item width to the percentage that divides by 100, for example, a collection item with 33.333% width will allow you to show 3 collection items per row.

On a lower viewport, if 33.333% width is too wide, you can simply change the width of the collection item to 50% to show only two items per row.

I usually use flexbox myself, here is a good example layouts page: https://flexbox.webflow.com.

You can also use grid styling with collection lists, but the key is to set the collection list to single column and then adjust the width of the collection item class instead of having a fixed number of columns in collection list settings.

Another example might be to set collection items to be 25% width to have 4 items show per row.

Would it be possible for you to help share some additional detail that will help the community to provide assistance?

Learn more about collection lists here: Collection list | Webflow University

I hope this helps