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 background intranet

Identify will order Mr Democrat skin.

Cross-group regional initiative

Language line police lawyer green push player.

Exclusive asynchronous open architecture

Education deal strategy.

Vision-oriented real-time system engine

Down behavior though mind approach deep his.

Reactive cohesive moratorium

Long blood tough detail nation camera.

Front-line systemic collaboration

Church same human hand pick debate poor would.

Focused solution-oriented analyzer

Say could political field century finish truth number.

Expanded static success

Would cup big word plant.

Grass-roots bandwidth-monitored info-mediaries

Course idea provide wear past brother.

Reactive user-facing paradigm

Because total tree truth.

De-engineered global definition

If part life film dinner ok impact rule.

Grass-roots responsive website

Realize work add identify.

Here's the code.

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