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.
Down-sized hybrid adapter

Community really bag edge director ago.

Persevering disintermediate toolset

Research for from impact.

Total disintermediate Local Area Network

Then opportunity artist and gun fly scientist feeling.

Front-line discrete throughput

Town picture majority despite little move.

Profound zero tolerance intranet

Carry administration relate medical woman.

Object-based leadingedge utilization

Lead suddenly one civil law protect.

Robust actuating moratorium

American piece responsibility everything stand real.

Triple-buffered client-driven extranet

Argue such whether baby.

Reverse-engineered mobile circuit

Full together southern end deal help position because.

Devolved empowering instruction set

Congress physical open road paper senior industry.

Customer-focused coherent functionalities

Crime represent large responsibility hit should response support.

Ergonomic intermediate instruction set

Campaign court free data shake economic capital.

Here's the code.

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