[Resolved] Pagination styling issue

[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

[David]

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

[Matthew]

Great thanks! 🙂

[David]

You’re welcome

[Author]

Posts