Varying limit items for a collection depending size

Community resources General
1

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

2

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

1 Like
3

I hope you have solved , the issue.

4

Collection list limit, filter, sorting and pagination settings are not per-breakpoint. They are overall configuration settings for that collection list.

If you really want to reduce the limit at a specific breakpoint, you could possibly do it through script + CSS, but the easiest way is to simply duplicate the whole collection list, set a different limit, and then conditionally hide/show each of the 2 collection lists depending on the breakpoints you want them to be visible on.

6

I added a feature request as I would like the Grid to have the ability to set item limits more dynamically. Please help by voting this up:
https://wishlist.webflow.com/ideas/WEBFLOW-I-5854

7

I forgot to post this here after my last message, but we built this capability into Sygnal Attributes to support a client project.

You can find the “limit items by breakpoint” feature in this cloneable demo.
( you do not need to use the random sort feature for it to work )

8

Hi i had similar issue, thanks for your help