Archived topic
How to change text and style of next and previous page buttons
3 replies · Started by Ravi Dixit on April 14, 2020
Viewing posts 1–4 of 4
Hey !
I want to change the style of next and previous page buttons.
In the first page i want to display a full width button. Something like this. https://prnt.sc/rzkhkr
And in the page 2 i want to display two half width buttons. Like this https://prnt.sc/rzkge2
How can i make it possible?
Thanks you..
Hi there,
you will need to remove this:
.next.page-numbers {
display: block;
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
text-align: center;
width: 40%;
}
.nav-links {
display: block;
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
text-align: center;
width: 40%;
}And add this:
.nav-links .page-numbers {
display: block;
background-color: blue;
color: white;
padding: 10px;
border-radius: 5px;
text-align: center;
flex: 1 0 calc(50% - 5px);
box-sizing: border-box;
}
.nav-links {
display: flex;
}
.next.page-numbers {
margin-left: 5px;
}
.prev.page-numbers {
margin-right: 5px;
}Thanks man it works as expected.
You're welcome
This archived topic is closed to new replies.
