Responsive Pagination

Give Webflow's paginated collection lists responsive page sizes

View the Demos
Learn More
The Code
Video Walkthrough
WEBFLOW HACKS

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

Demonstration

  • 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

Notes

  • 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
1920px
1440px
1280px
Desktop
Tablet
Landscape
Portrait
WEBFLOW HACKS

Responsive Pagination

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