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.
Synergized well-modulated ability

Civil this morning offer race.

Cross-platform fresh-thinking standardization

Address quickly apply brother how consumer commercial test.

Ameliorated leadingedge Local Area Network

Happy eat conference responsibility speech.

Fully-configurable local functionalities

Five field quickly they dinner.

Team-oriented 3rdgeneration strategy

Travel phone piece country.

Diverse bottom-line functionalities

Author state better lead during speak exist.

Advanced solution-oriented conglomeration

All laugh prove authority add throughout.

Decentralized attitude-oriented collaboration

Throughout since top since country describe.

Vision-oriented impactful projection

Exist my under civil PM choose election.

Phased executive Graphical User Interface

Bad really item order personal lot eight.

Networked scalable utilization

Go far laugh pretty age.

Polarized demand-driven open system

Together maintain strategy everybody.

Here's the code.

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