Limit Items by Breakpoint

Advanced Element Sorting

Webflow has a built-in Limit Items feature on Collection Lists, however it is not breakpoint-sensitive.

Our solution dynamically adjusts the number shown for the breakpoint that the site is being viewed at, with no refresh needed.

This feature is also very useful when used with wfu-sort, using the random setting. With the combination of random sorting and item limits, you can display a random set of items on every page refresh.

Usage Notes

NOTE: Use only one of these two approaches;

`wfu-limit-items` attribute

Place on any Collection List directly ( not the Collection List Wrapper ).

Specify the number of items you want to show from 1 to 12.

OR, use the breakpoint variations

If you want breakpoint-specific counts, use ALL 4 of these attributes.

wfu-limit-items-D the number to show for desktops
wfu-limit-items-T the number to show for tablet
wfu-limit-items-L the number to show for mobile landscape
wfu-limit-items-P the number to show for mobile portrait

Place on any Collection List directly ( not the Collection List Wrapper ).

Specify the number of items you want to show from 1 to 12.

Advanced note

If you want to have the item limits also shown in the Designer, you can add a special chunk of CSS code into an HTML Embed. See the Cloneable, above. You’ll find this CSS in the HTML Embed at the very bottom of the homepage.

Getting Started ( NOCODE )

STEP 1 - Add the Library

There are currently no configuration options for this library, so we’ll use a no-code integration approach.

Add this CSS script to the HEAD of your site or page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.11/dist/css/webflow-html.css">

Add this JS reference to the BODY of your site or page.

<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.11/src/nocode/webflow-html.js"></script>

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

See above for details.