Profile: Javier Félix Hernández Márquez

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.