Responsive Pagination

This thread is resolved. Here is a description of the problem and solution.

Problem:

1. When adding pagination to an archive, it overflows the screen when viewing on a smaller screensize and/or having a lot of pages that don't fit the screenwidth.

2. It would be nice to choose a different paginationstyle depending on the device used.

Solution:

See the examples here:

https://toolset.com/forums/topic/responsive-pagination/#post-2134463

Relevant Documentation:

This support ticket is created 3 years, 3 months ago. 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.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 2 replies, has 2 voices.

Last updated by Helena Gwyn 3 years, 3 months ago.

Assisted by: Luo Yang.

Author

Posts

August 4, 2021 at 2:17 pm #2133801

Helena Gwyn

Two things:
1. When adding pagination to an archive, it overflows the screen when viewing on a smaller screensize and/or having a lot of pages that don't fit the screenwidth. (see attachment)
2. It would be nice to choose a different paginationstyle depending on the device used.

August 5, 2021 at 7:44 am #2134463

Luo Yang

Hello,

Q1) You can use CSS codes to specify the flex-wrap property of pagination controls, so wrap to the next line when the container width is too small, for example:

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

Q2) You can use [wpv-conditional] shortcode to check WP function wp_is_mobile() results, and output different results, for example:
1) Dashboard-> Toolset > Settings > Front-end content, in section "Functions inside conditional evaluations", register function name: wp_is_mobile
2) Use it like these:

[wpv-conditional if="( wp_is_mobile() eq '1' )"]
Mobile content here
[/wpv-conditional]
 
[wpv-conditional if="( wp_is_mobile() eq '0' )"]
Other content here
[/wpv-conditional]

August 6, 2021 at 9:48 am #2135555

Helena Gwyn

My issue is resolved now. Thank you!