Limit Items by Breakpoint ❺
Make your collection list & static content fully responsive by controlling the quantity
Last updated
Was this helpful?
Make your collection list & static content fully responsive by controlling the quantity
Last updated
Was this helpful?
Webflow has a built-in Limit Items feature on Collection Lists, however it is not breakpoint-sensitive.
This often presents a problem for designers because if you're displaying e.g. blog posts in a grid, you may want to show a 4x3 grid at desktop, 3x3 on tablet, 2x2 on mobile landscape and 1x4 on mobile portrait.
SA5 allows you to specify and adjust the number of items you want to appear at each breakpoint dynamically.
If you're unsure of how to apply the documentation, use the demo cloneables above as an implementation reference.
First, add the library as detailed in Quick Start.
This attribute is CSS-based, and it's possible to paste the <style>
block directly into an Embed if you want design time support.
See below for the attributes.
This attribute uses breakpoint suffixes; which appear like this;
The :t
indicates that this attribute applies to Webflow's tablet breakpoint and below, until it is overridden by another more specific breakpoint like :l
( mobile landscape ) or :p
( mobile portrait ).
It's important to understand the fundamentals of how Webflow's breakpoints work in order to configure this attribute properly.
If you're unfamiliar with responsive design in Webflow, breakpoint-specific styling is applied in a desktop-outward fashion-
From Webflow Help Center;
Each breakpoint view lets you style elements for a particular viewport range:
Styles set on the 1920px breakpoint apply to screens 1920px wide and above
Styles set on the 1440px breakpoint apply to screens 1440px wide and above
Styles set on the 1280px breakpoint apply to screens 1280px wide and above
Styles set on the desktop (base) breakpoint apply to all devices unless overridden at other device breakpoints
Styles set on the tablet breakpoint apply to screens 991px wide and below
Styles set on the mobile landscape breakpoint apply to screens 767px wide and below
Styles set on the mobile portrait breakpoint apply to screens 478px wide and below
Learn how responsiveness works with Webflow' breakpoints.
For each breakpoint-specific attribute, set the value to the number of items you want to show, 1 to 30.
Place the custom attributes you want on the Collection List element directly ( not the Collection List Wrapper element ).
wfu-limit-items
Desktop ( base breakpoint )
wfu-limit-items:t
Tablet, and below
wfu-limit-items:l
Mobile Landscape, and below
wfu-limit-items:p
Mobile Portrait
wfu-limit-items:1280
Large ( 1280+ ), and above
wfu-limit-items:1440
X-Large ( 1440+ ), and above
wfu-limit-items:1920
XX-Large ( 1920+ ), and above
If you want to have the item limits also shown directly in the Designer, you can add the CSS code directly into an HTML Embed.
This attribute can be used with wfu-sort
. Using the random
setting, it allows you to maintain limited length lists that are re-randomized on every page refresh.