Skip Navigation

[Résolu] Pagination not adaptable to mobile devices.

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem:

I have added pagination to a view, and it displays correctly on desktop but goes out of canvas on mobile, breaking the website's responsiveness. I am using the GeneratePress theme.

Solution:

Adding the CSS code below will enable flex-wrap, ensuring the pagination fits within the canvas on mobile devices:

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

Alternatively, use Toolset’s pagination options to reduce the number of page links displayed for a cleaner look on mobile.

This support ticket is created Il y a 1 mois et 2 semaines. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Aucun de nos assistants n'est disponible aujourd'hui sur le forum Jeu d'outils. Veuillez créer un ticket, et nous nous le traiterons dès notre prochaine connexion. Merci de votre compréhension.

Ce sujet contient 1 réponse, a 2 voix.

Dernière mise à jour par Christopher Amirian Il y a 1 mois et 1 semaine.

Assisté par: Christopher Amirian.

Auteur
Publications
#2777431
Screenshot_20241012_091233_com.android.chrome.jpg

Tell us what you are trying to do?
I have created a view and added pagination. In desktop format it displays fine but in mobile format it goes out of the canvas and then the website is no longer responsive.
I use the GeneratePress theme and I need help to solve this problem, thanks.

Is there any documentation that you are following?
Your video tutorials.

Is there a similar example that we can see?
No.

What is the link to your site?
lien caché

#2777527

Christopher Amirian
Supporter

Les langues: Anglais (English )

Hi,

I think using the wrap mode if the flex display should fix the issue you have.

Please add the CSS code below to your theme:

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

Thanks.

#2777543

Hi Christopher,
Thank you very much for responding so quickly. The code worked perfectly.
But I personally didn't like the final result so I looked into the Toolset options and discovered that using the sidebar option indicating the number of previous and next pages and the placeholder for skipped pages, it can also be solved with a better appearance and without having to show so many page numbers.
You can mark the incident as resolved.
Kind regards