Mobile pagination layout breaks: pages missing when siblings = 0

Attributes
1

I’m using List Load with fs-list-pagesiblings=“1,1,0,0” and fs-list-pageboundary=“1” for my pagination to keep the layout compact on mobile. This setup works visually for keeping the pagination narrow, but I’m running into confusing behavior with page visibility:

  • On desktop/tablet, everything looks great (siblings = 1).

  • On mobile (where siblings = 0), certain page numbers are missing from the pagination entirely.

For example:

  • When I’m on page 4, the page doesn’t show.

Image20250821101019
Image20250821101019668×106 1.74 KB

  • But when I go to page 5, the page appears.

Image20250821101024
Image20250821101024684×110 1.47 KB

  • On larger screens, pages are displayed as normal with siblings = 1, but this causes the whole pagination container to overflow on smaller screens.

So I’m stuck:

  • If I use siblings = 1, the pagination becomes too wide on small phones.

  • If I use siblings = 0, it starts dropping useful pages and creating awkward gaps in the flow.

Is this expected behavior with siblings=0?

Is there a recommended way to:

  • Keep the pagination compact on small screens,

  • But still show at least the current page plus one page before/after?

Any insight or workarounds would be really appreciated!

Note that I am unable to provide a read-only link due to confidentiality.

Thanks!

2

Hey @design4!

The pagination behavior you’re seeing with fs-list-pagesiblings="0" on mobile is actually expected. When siblings is set to 0, the pagination only shows the current page, boundary pages, and ellipsis when needed - which explains why page 4 is “missing” in your screenshot.

You have a few ways to fix this:

For the best balance between compact design and usability, try adjusting your boundary settings:

fs-list-pagesiblings="1,1,1,0"
fs-list-pageboundary="2,2,1,1"

If you need something even more compact:

fs-list-pagesiblings="1,1,0,0"  
fs-list-pageboundary="1,1,1,1"

The first option will likely solve your issue while maintaining good navigation context on smaller screens. The responsive boundary system gives you control over how many pages show at the beginning and end across different screen sizes.

Let us know if you need further help with this! @Support-Luis or @Support-Pedro can assist if you’d like to explore custom CSS solutions for pagination overflow on mobile.

3

Hi @Support-Finn, thanks for the response.

I am indeed using:

fs-list-pagesiblings="1,1,0,0"  
fs-list-pageboundary="1,1,1,1"

I am not sure I understand your explanation - you said that when siblings is set to 0, pagination shows the current page, but when I am on page 4, it’s clearly not visible (the first screenshot).

@Support-Luis @Support-Pedro can I get some assistance with this?

4

Hey @design4! Apologies for the delay!

Could you please share a read-only link? I’ll take a look

5

Hi @Support-Luis, unfortunately I can’t provide a read-only link here due to confidentiality. Is there another way I can receive support? I can provide more screenshots and a screen recording as well.

6

@design4, if you are under an NDA you can always share a link or the recording with me via DM.

I’ve sent you a message over there!