[Resolved] Mobile Pagination

[Author]

Posts

[CharlesB2907]

The numbered page pagination is enabled. Is it possible to have ONLY the arrow back ad arrow forward without the page numbers on mobile?

[Waqar]

Hi Charles,

Thank you for contacting us and I'll be happy to assist.

You can use "wpv-pager-prev-page" ( ref: https://toolset.com/documentation/user-guides/views-shortcodes/#vf-153237 ) and "wpv-pager-next-page" ( ref: https://toolset.com/documentation/user-guides/views-shortcodes/#vf-153239 ) shortcodes to show only the previous and next page links, as the pagination.

To show a different type of pagination, only on mobiles, you can follow these steps:

1. In your view's "Loop Editor" section, you'll find the following shortcode to show the full pagination with numerical page number links:

[wpv-pager-nav-links previous_next_links="true" step="10" reach="4"]

2. You can replace it with the following code:

<div class="show-on-mobile">
<ul class="pagination">
      <li class="page-item">
        [wpv-pager-prev-page force="true"][wpml-string context="wpv-views"]&#xAB; Previous[/wpml-string][/wpv-pager-prev-page]
      </li>
      <li class="page-item">
        [wpv-pager-next-page force="true"][wpml-string context="wpv-views"]Next &#xBB;[/wpml-string][/wpv-pager-next-page]
      </li>
</ul>
</div>

<div class="hide-on-mobile">
[wpv-pager-nav-links previous_next_links="true" step="10" reach="4"]
</div>

The above code will include both types of paginations wrapped in special containers with classes "show-on-mobile" and "hide-on-mobile" respectively.

3. Next, in the view's "CSS editor" tab, you can include following custom CSS code to show/hide each pagination type, based on the screen size and also to style the next and previous links on mobiles:

ul.pagination {
	display: block;
	overflow: hidden;
	padding: 0px;
}

ul.pagination li.page-item {
	float: left;
	width: 50%;
}

ul.pagination li.page-item span,
ul.pagination li.page-item a {
	padding: 6px 12px;
	display: block;
	float: none;
}

ul.pagination li.page-item .wpv-filter-previous-link {
	text-align: left;
}

ul.pagination li.page-item .wpv-filter-next-link {
	text-align: right;
}

.show-on-mobile {
	display: none !important;
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
	.hide-on-mobile {
		display: none !important;
	}

	.show-on-mobile {
		display: block !important;
	}
}

Important note: As explained before, 1-1 custom CSS code assistance is something that falls beyond the scope of support that we provide. You can read details around what is covered at: https://toolset.com/toolset-support-policy/

We're glad that you've been making progress with your project, but for design changes and customizations, we'll strongly recommend hiring a professional to help you with the CSS code, in more timely and efficient manner:
https://toolset.com/contractors/

regards,
Waqar

[CharlesB2907]

My issue is resolved now. Thank you!