Pagination Numbers Not Displaying Consistently

[jacobted]

Hey guys. I’ve been trying to get the pagination numbers on my blog pages to look consistent with the spacing in between them and trying to get them to center under the blog posts on my site. The custom CSS I’ve entered in the Customizer works and looks exactly how I want it to on the blog index page but for some reason it displays completely differently on the second page of my blog entries. Not sure if it’s because I removed the page arrows or what. Can you point me in the right direction here? My CSS is below and I’ve uploaded a couple of screen shots of what I’m talking about. Secure note with login info will follow. I appreciate any help you can give me.

.x-pagination a {
justify-content: center !important; margin: 0px 0px 0px -20px !important; color: rgba(255, 255, 255, .5); 
background: transparent; box-shadow: none; text-shadow: none; font-family: 'osp-din', sans-serif; 
font-size: 22px !important;
}

.x-pagination a:hover {
color: #ffffff;
}

div.x-pagination .current {
background: transparent; box-shadow: none; text-shadow: none; font-family: 'osp-din', sans-serif; 
font-size: 22px !important; color: #ffffff;
}

a.prev-next.hidden-phone {
display: none;
}

[mldarshana]

Hi There,

Thanks for writing in! Could you please try adding the following CSS rule into your Theme Options > Global CSS area.

.paged .x-pagination a, .paged .x-pagination span {
    margin: 0;
}

Hope that helps.

[jacobted]

Thanks! I tweaked that code a little bit to balance the negative margin I put on the numbers and got it to look how I wanted. The blog index pagination still seems like it’s off center though.

.x-pagination a {
justify-content: center !important; margin: 0px 0px 0px -20px !important; color: rgba(255, 255, 255, .5); background: 
transparent; box-shadow: none; text-shadow: none; font-family: 'osp-din', sans-serif; font-size: 22px !important;
}

.x-pagination a:hover {
color: #ffffff;
}

div.x-pagination .current {
background: transparent; box-shadow: none; text-shadow: none; font-family: 'osp-din', sans-serif; font-size: 22px 
!important; color: #ffffff;
}

.paged .x-pagination a, .paged .x-pagination span {
margin: 0px 0px 0px -10px !important;
}

[nabeel]

Hi again,

Try removing the negative margin from your code and then add the following code as well:

.x-pagination li {
    display: inline-block !important;
}
.x-pagination a, .x-pagination span {
    margin: 0 !important;
}

Let us know how this goes!

[jacobted]

That did it kind sir! I can adjust my margins with your code and the numbers still remain centered. Thank you very much!

[nabeel]

Glad we could help.

Cheers!