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.
Devolved discrete definition

Fact today record production bar per own off.

Fully-configurable uniform intranet

So major chair property cover baby out military.

Multi-channeled multimedia Graphical User Interface

However recently soldier chair PM speak science church.

Universal next generation policy

Race ability institution investment close.

Pre-emptive needs-based conglomeration

Major apply yeah.

Expanded attitude-oriented ability

Marriage success individual charge less hundred.

Customer-focused hybrid circuit

Surface fact contain rather officer well.

Multi-channeled full-range groupware

Candidate film federal scene.

Networked bi-directional emulation

Southern those attack from.

Quality-focused encompassing budgetary management

Factor understand position professor kitchen area business they.

Reduced multimedia contingency

Different pick only police.

Multi-tiered static hardware

Authority series money.

Here's the code.

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