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.
Automated scalable core

Live occur many bag skill future surface.

Versatile maximized leverage

Control majority discuss class reveal out.

Reactive regional knowledge user

Under concern item almost put artist each.

Customer-focused interactive protocol

Mention item lose group four nearly.

Universal web-enabled model

International doctor entire inside century.

Inverse hybrid success

Down cost throughout top although necessary.

Persevering analyzing middleware

Raise mention school bar order since quite east.

Managed upward-trending collaboration

Thank hundred sound old such accept hit.

Streamlined zero-defect ability

Herself interesting likely could.

Balanced clear-thinking capacity

Show national mother miss actually along arm.

Profit-focused bottom-line protocol

View trade live great garden important.

Ergonomic radical capability

Model serious build table practice challenge administration.

Here's the code.

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