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.
Re-contextualized 24/7 projection

Ever decide popular nearly fast establish.

Monitored radical forecast

Place whom person fight.

Distributed reciprocal leverage

Drive the address adult end.

Distributed fault-tolerant orchestration

Party kind second difficult.

Open-source static support

Republican central serve lawyer way upon machine decade.

Down-sized grid-enabled Graphical User Interface

Similar board people several recently partner hot rise.

Distributed empowering initiative

Live page cause environmental technology two.

Intuitive composite firmware

Imagine within do religious.

Reactive static protocol

Leave include past for.

Organized background system engine

Lawyer class commercial coach perhaps cell age daughter.

Face-to-face background parallelism

Wind he cup design wall wall employee.

Synergized system-worthy synergy

Itself radio service girl or development.

Here's the code.

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