[Resolved] Smartphone Pagination

[Author]

Posts

[BiernackiH1367]

Hi
I need to now how it's possible to centre the pagination in smartphone mode.
I manage to center the pagination in desktop mode but on smartphone it is not. how can I do
thanks a lot
regards
harold

[Nigel]

You have a custom CSS style being applied that changes the display property on smaller screens to display: -webkit-inline-box which is responsible for the centering being broken on smaller screens.

I don't know what adds that custom CSS rule, but you either need to remove it or overwrite it.

[BiernackiH1367]

It wa added by some of toolset to center the pagination on desktop mode.
What kind of css I need to use to have pagination center in all mode (desktop, tablet and mobile)
thanks
regards
harodl

[Nigel]

In the screenshot you can see a block of custom CSS added to your site, I'm not sure where you added it, but you need to delete the section highlighted which is applying a different style on smaller screens.

[BiernackiH1367]

Hello
Thank you very much for your answer. I deleted the part Css indicated. Actually now it seems centered, but the pagination bar is not displayed in its entirety as you can see in the screenshots. What is the solution.
thanks
regards
Harold

[Nigel]

One option would be to change how the pagination links are output so that you don't show every page (some of them are replaced by ... dots) as described here: https://toolset.com/documentation/user-guides/views-pagination/#inserting-pagination-controls

But if you want to continue with the way they are currently output, then you need the list of pages to break onto the next line on small screens where there is not enough width to display them all, which you can do with the flex-wrap property, like so:

.list-inline {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

[BiernackiH1367]

My issue is resolved now. Thank you!