[Resolved] Pagination style question

[Ezynic SL]

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?

[David]

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;
    }
}

[Ezynic SL]

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.

[David]

Oops – yes my bad. missing some . – looks good 🙂

[Author]

Posts