Responsive Pagination

Give Webflow's paginated collection lists responsive page sizes

View the Demos
Learn More
The Code
Video Walkthrough

Responsive Pagination! Really?

For some time we've been using a CSS-based technique to control the number of collection items that appear at various breakpoints e.g. 20 on desktop, 15 on tablet, 5 on mobile-portrait.

However there was one key issue- this approach doesn't support paginated collection lists.

So, we've ditched the CSS approach and designed a second approach around Finsweet's powerful CMS Load more attribute.

Tutorial Discussion

Design Goals

  • Make responsive pagination possible, using FS CMS Load
  • Support all 7 Webflow breakpoints with varying counts
  • Fully support FS CMS Filter
  • Dynamically adjust the item count and current page as screen size crosses breakpoints


  • Uses CMS Filter and CMS Load.
  • 100 Items total
  • Per-page item count varies by breakpoint 1920=18, 1440=15, 1280=12, desktop=8, tablet=6, landscape=4, portrait=2
  • Filtering works, by title


  • Current page # is preserved across breakpoint changes
  • If the current page is > total pages, we adjust automatically to the last page
  • Watch the console for log details as breakpoints change

Responsive Pagination

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Matched X of Y items. Showing Z of them.
Visionary human-resource Internet solution

Tough those sort town how available.

Diverse system-worthy process improvement

Page process form part drive all.

Cross-platform intermediate migration

Spend purpose black six.

Self-enabling clear-thinking core

Bring more of forward.

Fundamental asymmetric hub

Woman act cover accept.

Function-based bottom-line archive

Class source theory team spend measure.

Multi-channeled holistic task-force

Speak care product important kid.

Switchable methodical secured line

Behind mention tell morning general these speech.

Innovative interactive migration

Southern attention set suggest try.

Reverse-engineered asynchronous product

Pull phone lead perhaps summer.

Versatile modular circuit

Issue huge case fund bill human.

Polarized clear-thinking archive

Western agent simply miss at story.

Here's the code.

See the Pen TEST | FS Load | Responsive by Michael Wells (@memetican) on CodePen.