[Support request] pagination overlapping on mobile

Home Forums Support [Support request] pagination overlapping on mobile

Home Forums Support pagination overlapping on mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1559448
    Baz

    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.

    #1559665
    Elvin
    Staff
    Customer Support

    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.

    #1559943
    Baz

    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.

    #1560353
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.