Paging Visual Issue on Mobile

Try inspecting that element and see, what “display” is applied atm. It looks like “display: block” for me, but give me more info, if you’ll still need a help.

Edit:
Also check “word-break” property.

• This reply was modified 8 months, 1 week ago by johnwandler.

@johnwandler I have tried many things and failed. Including your suggestions.

Finally i solved that with a quick-and-dirty way, making the font one size smaller in the numbers. Not the best way, still i had to fix it.

This is a UNIVERSAL bug, happens in ALL Directorist sites i could find.

Check this for example with a cell phone, the paging numbers

https://shopnative.powwows.com/all-listings/page/3/

Hi @dimalifragis

The flex container is trying to fit the whole pagination in one line, so the pagination links are shrinking to adjust themselves in one line.

There are several ways to fix it –

1. You can reduce the pagination midpoints to 3 instead of 5 to fit it nicely – Directorist: Custom Pagination (github.com)

2. You can use custom CSS to wrap it to multiple lines for mobile view –

@media only screen and (max-width: 600px) {
  .directorist-pagination {
    flex-wrap: wrap;
  }
}

3. You can also use CSS code to reduce padding, font size to adjust them in one line.

Please let me know if you need further information.

Kind Regards

@mahfuz87 Thank you.

@mahfuz87 The snippet you provided

https://gist.github.com/MahfuzulAlam/5b01e9d3c416b50b663f665b3534367a

doesn’t seem to work right after page 3. Am i missing something?

Thanks