Limit CMS Items by Breakpoint?

Design help Custom code
1

Has anyone leveraged a script that could limit the displayed quantity of cms items in a collection by breakpoint?

EX: Showing 6 on desktop, 10 on tablet, 16 on mobile?

Thanks!

2

Easiest solution would be to just duplicate the collection list three times, hiding them all except for the one designed for the current breakpoint. That’s the “no code” way.

1 Like
3

Yes, currently have that implemented. Want to work around the performance loss having three cms collections.

4

All the CMS items need to be present on the page with a custom code solution. The issue of duplicate or partially duplicate collection lists would not add much weight to a page (just some HTML). Images in that case are not loaded twice so I don’t see where there would be a performance hit. Certainly not with WF since the pages are rendered on publish.

You could build a custom code solution that used the Window.matchMedia() method.

The Window interface’s matchMedia() method returns a new MediaQueryList object representing the parsed results of the specified media query string. The returned MediaQueryList can then be used to determine if the Document matches the media query, or to monitor a document to detect when it matches or stops matching the media query.

Then you have to hide the collection list, convert it to an array, get the length and slice it as needed. Then add it back to some element. Should be straight forward. You could use jQuery since it is loaded already on your site if you wish.

1 Like
5

Thanks! All makes sense. Wasn’t aware all CMS items must be loaded anyway in custom code.

6

You can’t have less items at smaller breakpoints, but you can use custom CSS to hide them. For example, to target Webflow’s tablet breakpoint and only show 11 CMS items:

<style>
    @media screen and (max-width: 991px) and (min-width: 768px) {
        .w-dyn-items :nth-child(n+11) {
            display: none;
        }
    }
</style>

If you have more than 1 CMS collection on the page and you only want to target 1 specific collection, swap out the class .w-dyn-items for the class you gave the element that wraps all your CMS items in Webflow.

4 Likes
7

@jasondark That’s exactly what I needed! Thanks so much.

8

hey Jeff! I was trying to send you a pm about your article here:Render Custom Code from Webflow CMS Item's Value - WF How
I perfectly followed your instructions and got it to work with your sample text, but im currently running into issues with my custom code. Id love to buy you a beer to get a few mins of your time !
Please pm me when you can !
video of my problem: Loom | Free Screen & Video Recording Software | Loom

read only of page: https://preview.webflow.com/preview/cool-app-ladingpage?utm_medium=preview_link&utm_source=dashboard&utm_content=cool-app-ladingpage&preview=85726f5598f22c15179df0a8f45a592c&mode=preview

(my email just in case Kleveland@toptradersfx.com)

9

For anyone searching this later, here’s a cloneable that allows you to set breakpoint-specific limits using only custom attributes.

As it happens, it uses the exact same CSS approach as Jason Dark’s solution here, which enables it to work in the designer if you find that convenient.

All details are here;