Blog Archive Pager Navigation styling

Hi there,

can you share a link to your site so i can see what you have so far? Then i can look at the required CSS

Here is the link https://www.growthfunda.com/blog/

Hi there,

Try adding this:

.nav-links {
    display: flex;
    justify-content: center;
}

.paging-navigation .nav-links>* {
    margin: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    text-align: center;
    line-height: 30px;
}

.page-numbers.prev,
.page-numbers.next,
.page-numbers.dots {
    background: none;
    color: initial !important;
    border: 0;
    height: 30px;
    line-height: 30px;
    width: auto;
}

Tom, Blog Archive Pager Navigation styling is now appearing at the center of the page which is perfect but there is no circle around it. Also, the Previous text is cropping and going down till the footer.
Please ref attached image, this after I have added ur code: https://ibb.co/n8RLBRg and this I'm expecting like this https://ibb.co/18gQgq0

My CSS was in addition to the CSS you were already using to create the circles.

If you re-add that and then add my CSS, it should work.

Thanks its working.

Glad I could help :)

Tom, I found that my on when I go to blog archive page 2,3, 4....and so on the navigation text "Previous" is showing disturbed. It lagging down and overlapping on the footer and also showing in white color. It should display the same as text: Next → Ref: Image: https://ibb.co/MMqqkX4 and Here is the URL of my blog archive https://www.growthfunda.com/blog/page/2/

Edit this existing CSS:

.page-numbers.next, .page-numbers.dots {
    background: none;
    color: initial !important;
    border: 0;
    height: 30px;
    line-height: 30px;
    width: auto;
}

To this:

.page-numbers.next, .page-numbers.dots, .page-numbers.prev {
    background: none;
    color: initial !important;
    border: 0;
    height: 30px;
    line-height: 30px;
    width: auto;
}

It looks ok on Desktop but on Mobile, all numbers and text moved in the right direction. Here is how it looks: https://ibb.co/WDB6VHD

Can you clear and disable your caching plugin first so I can inspect the code better?

I have disabled the caching plugin as requested. Check now.

Hi there,

there simply isn't enough room for the label and the arrow on the smaller screens.
You could include this CSS:

@media(max-width: 460px) {
    #nav-below {
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-numbers.next,
    .page-numbers.dots,
    .page-numbers.prev {
        font-size: 0;
        
    }
    .page-numbers.next span,
    .page-numbers.dots span,
    .page-numbers.prev span {
        font-size: 24px;
        padding: 0 8px;
    }
}

On small screens it will remove the Next / Previous Labels and just display the arrows.

Thanks, issue has been resolved