[Resolved] Pagination styling issue

Home Forums Support [Resolved] Pagination styling issue

Home Forums Support Pagination styling issue

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1663013
    Matthew

    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

    #1663089
    David
    Staff
    Customer Support

    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%;
      }
    }
    #1663321
    Matthew

    Great thanks! ๐Ÿ™‚

    #1663330
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.