Archived topic

pagination overlapping on mobile

3 replies · Started by Baz on November 30, 2020

Viewing posts 1–4 of 4

November 30, 2020 at 4:25 pm #1559448

I'm styling the pagination numbers to make them more larger with a coloured background. However, once the screen gets below 400px, the numbers start overlapping rather than stacking. Please see https://ibb.co/9sJgz2P

I tried using the CSS below, which didn't work. I don't want to activate the Spacing module just for this :)

@media only screen and (max-width: 400px) {
    #nav-below .page-numbers.next, #nav-below .page-numbers.prev {
        display: inline-block;
        margin: 10px 0;
    }
}

Maybe it needs to be flexbox CSS?

Also, how do I change, or get rid of the arrows before/after 'Previous' & 'Next'

Thanks.

November 30, 2020 at 8:47 pm #1559665

Hi,

Also, how do I change, or get rid of the arrows before/after ‘Previous’ & ‘Next’

You can modify the post navigation markup using the generate_post_navigation_args filter.

Example:

add_filter( 'generate_post_navigation_args', function( $args ) {
    if ( is_single() ) {

        $args['previous_format'] = '<div class="nav-previous"><span class="prev" title="' . esc_attr__( 'Previous', 'generatepress' ) . '">%link</span></div>';
        $args['next_format'] = '<div class="nav-next"><span class="next" title="' . esc_attr__( 'Next', 'generatepress' ) . '">%link</span></div>';
    }

    return $args;
} );

This completely removes the arrow icons.

As for the layout on mobile, its hard to tell why it overlaps that way w/o being able to inspect the site. If you're working on a local site, any chance you can put up a live staging/dev site so we could check? Thank you.

December 1, 2020 at 1:31 am #1559943

Hi Alvin,

I'm using a local host setup for site development.

The filter you provided to modify the post navigation markup has no effect?

With regards to the styling issue, I'm just adding the following CSS to the child theme (no other plugins except GP Premium with Blog and Menu activated).

I have also set the theme to use Icon Type: Font.

.paging-navigation .page-numbers {
	border-radius: 3px;
	padding: 10px 20px;
}

.paging-navigation .nav-links .current {
    background-color: #0066cc;
	color: #fff;
}

.paging-navigation .nav-links>* {
    background-color: #333;
	color: #fff;
}

.paging-navigation .nav-links>*:hover {
    background-color: #0066cc;
	color: #fff;
}

.paging-navigation {
    text-align: center;
}

@media only screen and (max-width: 400px) {
    #nav-below .page-numbers.next, #nav-below .page-numbers.prev {
        display: inline-block;
        margin: 10px 0;
    }
}

Thank you.

December 1, 2020 at 6:44 am #1560353

Hi there,

see the CSS method i provided here:

https://generatepress.com/forums/topic/numbered-page-navigation/#post-1352543

It's responsive, on smaller screens the next / prev buttons will form their own row below the pagination.

This archived topic is closed to new replies.

Start building better websites today.