Need help on making the List Load v2 Pagination responsive. Plan is to have something like <1 … 3 4… 8> on the page dots on mobile so that it fits a mobile screen.
We have tried using page boundary and page sibling but we can’t seem to get the results we want. Does the look we want available or possible? if yes, may we know what we are doing wrong so we can address it.
You’re absolutely on the right track with those attributes! The reason you’re not getting the truncated pagination you want (like <1 … 3 4… 8>) on mobile comes down to the values being too high for the number of pages you have.
Here’s what’s happening:
You currently have fs-list-pagesiblings="9,9,4,4" which means:
Desktop: 9 sibling pages on each side of the active page
Tablet Landscape: 9 siblings
Tablet Portrait: 4 siblings
Mobile Portrait: 4 siblings
With only 6 total pages in your pagination, showing 4 siblings on mobile means almost all of your pages fit without needing any truncation (the ... ellipsis). The pagination system only shows ellipsis when there are more pages than can fit based on your sibling + boundary settings.
The fix:
To get that nice truncated pattern on mobile, you need to lower the mobile values significantly and work with fs-list-pageboundary together.
On your Collection List element with fs-list-element="list", update to:
pagesiblings: How many page numbers show around the active page before truncation
pageboundary: How many pages show at the start and end (the “1” and “8” in your <1 … 3 4… 8> example)
The order is: Desktop, Tablet Landscape, Tablet Portrait, Mobile Portrait
With lower values like 1 or 2 for mobile, you’ll get that truncation effect where the ellipsis appears between the boundary pages and the active page siblings.
Start with the values above and see how it looks on mobile. You may need to tweak them slightly based on your exact design preferences, but those should get you close to the pattern you described!
