Archived topic
Pagination style question
3 replies · Started by Ezynic SL on April 1, 2020
First of all, a suggestion: please add customization options for the pagination :-)
I'm styling the page numbers using the following code posted in the support forum:
.page-numbers {
padding: 2px 8px;
background-color: #009442;
border-radius: 4px;
color: #fff !important;
border: 2px solid #009442;
margin-right: 0.25em;
}
.page-numbers:hover,
.page-numbers.current {
background-color: #fff;
color: #009442 !important;
}
The only problem I have is that on mobile, the "next" link ("Siguiente" in Spanish) appears below the numbers and partially overlapping them. I've tried all sorts of CSS and I can't get it to separate from the numbers. Any ideas?
Hi there,
We're reviewing the pagination options - so maybe something for the future. suggestion noted :)
OK - so first off, lets get rid of that left hand margin on the nav-below to give it some more space:
@media(max-width: 768px) {
.generate-columns-container > .paging-navigation {
margin-left: 0;
}
}You could also reduce the Container Padding for mobile in Customizer > Layout > Container which may allow the Next / Previous to stay inline.
If not you can force them to be blocks and then top / bottom margins will apply:
@media (max-width: 420px) {
#nav-below prev, #nav-below next {
display: block;
margin: 10px 0;
}
}I think the last piece of CSS was missing some code to target the correct elements. Here's what I used:
@media (max-width: 420px) {
#nav-below .page-numbers.next, #nav-below .page-numbers.prev {
display: inline-block;
margin: 10px 0;
}
}I think inline-block looks really good for this application. It makes the buttons a bit bigger (due to padding I suppose) which I see as an advantage on mobile.
Oops - yes my bad. missing some . - looks good :)
