Limit CMS Items by Breakpoint?

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!

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

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

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

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

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.

2 Likes

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

hey Jeff! I was trying to send you a pm about your article here:https://www.wfhow.com/render-collection-custom-code-webflow/
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: https://www.loom.com/share/1fa06345901741e7989e8564cb16fa6b

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)