Limit items are currently not possible to adjust per breakpoint. That means that we currently have to display the same amount of items even though the screen is significantly smaller.
There is also another scenario which makes me miss the ability to set item limit per breakpoint:
Using a grid to display a collection. Want to display 1 row of 3 items on the laptop/desktop. On mobile, I stack these three underneath each other. On tablet, there is enough space for 2 items per row, but this will cause it to become only 1 item on the next row... In this case, it would be more ideal to change the limit to 4 on this breakpoint.
Currently, the only workaround I know is to add multiple collection lists and set visibility and limits individually. Not ideal, but it works.
Hope you can make limitations more dynamically.
Kjetil Grøsland
.svg){kind=logo}
This was another one of those, "cool, I'm finished moments' when in fact I wasn't finished as hadn't noticed my adjustments to limits on different breakpoints weren't changing per breakpoint. Thanks Michael Wells for the fix.
3 steps. Use this cloneable:
https://webflow.com/made-in-webflow/website/display-random-list-items
Copy the header code and paste it in your head code box:
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@3.39/dist/css/webflow-html.css"
>
2. Copy the footer code and paste it in your footer code box:
<script type="module"
src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@3.39/src/nocode/webflow-html.js"
></script>
3. Copy the code embed from the cloneable page body and paste it to the page you want to affect on your site:
(See attachment)
4. Set up attributes:
(see attachment 2) on the 'List' level of your CMS element (not wrapper, or item)
D = Desktop
T = Tablet
L = Landscape
P = Portrait
It's gross oversights like this that seriously make me reconsider using Webflow.
Here's a CSS-based workaround-
https://www.sygnal.com/lessons/limit-collection-list-items-by-breakpoint