[Resolved] Pagination button spacing issues

[Hemant]

Hello Team,

I am having issues with pagination.

Earlier I had raised concerns here:https://generatepress.com/forums/topic/help-with-css-next-previous-page-button/

Now the question is I have managed to get the pagination button and the spacing.. But when I check in mobile… It’s almost like buttons are crashing each other and the display is messed up.. You can check this url..

https://fatlossplanner.com/workout-plans-for-weight-loss/2/

Try to open it via cell phone..

Worst case, if the buttons can’t be aligned can we achieve something similar to below:
https://www3.forbes.com/business/best-places-to-retire-in-each-state-2018-vue/4/

Like how they have Continue button and nothing else…

Regards
Hemant s

[David]

Hi there,

in your filter PHP Snippet – change this line:

$args['before'] = '<p style="text-align: center;">';

to:

$args['before'] = '<p class="custom-next-previous" style="text-align: center;">';

Then add this CSS:

.custom-next-previous {
    text-align: center;
}
@media(max-width: 420px) {
    .custom-next-previous {
        margin-left: -20px;
        margin-right: -20px;
    }
}

[Hemant]

Works like charm… )

[David]

Glad to hear that

[Author]

Posts