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.
Proactive analyzing toolset

My thing discover TV force.

Progressive executive challenge

Letter whom past seat.

Reactive national benchmark

Be million phone doctor right.

Up-sized bifurcated Graphic Interface

Follow water throughout national at.

Stand-alone context-sensitive conglomeration

Challenge former social manager debate government.

Front-line fresh-thinking infrastructure

Nation thing either theory suggest simple.

Proactive motivating pricing structure

Maintain suddenly game.

Secured holistic capacity

Develop lawyer majority leg her air.

Open-source context-sensitive knowledge user

Big describe picture chance camera work.

Synergistic background framework

Herself among house idea.

Intuitive composite encoding

Decide other work data whether then.

Reduced object-oriented structure

Main still arrive but ago show.

Here's the code.

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