Archived topic
Pagination styling issue
3 replies · Started by Matthew on February 18, 2021
Viewing posts 1–4 of 4
Hi
I have an issue with pagination styling, I have been following some snippets off here to style this but on mobile it ends up looking like this:
https://markuphero.com/share/mjamy4brzQU27vhz3Edq
Any ideas how to solve this? Really appreciate some help on this, thanks :)
Matt
Hi there,
try adding this CSS to what you already have:
@media(max-width: 520px) {
/* Make nav links flex */
.nav-links {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* Space page numbers based on 5 visible */
.nav-links .page-numbers {
width: calc(20% - 2px);
}
/* Move next previous below pagination */
.nav-links .page-numbers.prev,
.nav-links .page-numbers.next {
order: 20;
margin-top: 5px;
flex-basis: 49%;
}
}Great thanks! :)
You're welcome
This archived topic is closed to new replies.
