[Resolved] Pagination style question

Home Forums Support Pagination style question

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1221925
    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?

    #1222229
    David
    Staff
    Customer Support

    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;
        }
    }
    #1222299
    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.

    #1222338
    David
    Staff
    Customer Support

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.