[Resolved] Pagination overflow on mobile

[Author]

Posts

[JorgeE7101]

Hello. I am currently facing an issue on my website that is causing the pages to overflow on mobile.

My theme is Generated Press.

I have an archive setup that I use for a custom taxonomy and other one for categories and tags. When I added the pagination to the pages, these just started to overflow on mobile. I've tried to fix it with CSS, but to no avail. I don't want to use the overflow-x hack, because I want to tackle the issue at its root.

This is the code I have for the pagination (it shows after the post loop)

[wpv-pager-archive-nav-links output="bootstrap" first_last_links="true" step="1" text_for_first_link="Primeira página" text_for_last_link="Última página"]

Some of the pages affected:

hidden link
hidden link

I need to give you access to the site, as this is the staging site and is under password protection.

Would it also be possible to add this stating site to the list of my sites, so I can install the last update?

Thanks.

[Minesh]

Hello. Thank you for contacting the Toolset support.

For responsive pagination links, you may try to use the following CSS code:

.wpv-archive-pagination-nav-links, .wpv-archive-pagination-nav-links-container, .wpv-pagination-nav-links, .wpv-pagination-nav-links-container, .wpv-pagination-preview-element {
    flex-wrap: wrap;
}

You can add the custom CSS to your archive:
- https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/#steps-for-adding-css-to-a-wordpress-archive

Yes, you can add this site as well as yoru development site.