Limit Items by Breakpoint ❺

Make your collection list & static content fully responsive by controlling the quantity

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.

Demonstration

Limit Collection Items, by Breakpoint - WebflowLimit Collection Items, by Breakpoint

Cloneable

If you're unsure of how to apply the documentation, use the demo cloneables above as an implementation reference.

Getting Started

STEP 1 - Add the Library

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.

STEP 2 - Apply the attributes for the limits you want applied

See below for the attributes.

Usage Notes

This attribute uses breakpoint suffixes; which appear like this;

wfu-limit-items:t = 10

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.

About Webflow Breakpoints

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.

Using SA5's Limit Items Attributes

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 ).

Attribute	Breakpoints Affected
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

Designer support

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.

Copy the CSS style block here

Notes

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.