Investa Pagination - Question | JoomShaper
Back to the questions

Investa Pagination

Serigne Fallou

Serigne Fallou

Template 1 year ago

hello pagination issue as showen in the scrren in mobile and in deskyop https://share.icloud.com/photos/01dYT5WD6AVMAuAkh0yciklog

0
5 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #166340

And additional CSS fix for Tablets (iPads) and Smartphones :

@media screen and (max-width: 990px) {
.pagination .page-item .page-link { padding: 10px; font-size: 16px; line-height: 18px;}
}

@media screen and (max-width: 680px) {
ul.pagination > li.disabled {display: none;}
.pagination .page-item .page-link {opacity: 0.9; padding: 8px !important;  font-size: 14px; line-height: 15px;}
.pagination-wrapper {margin-top: 10px; margin-left: -10px;}
}

Please use CSS from both responses to improve navigation lenght.

How it will look after. Yes, I hidden not active arrrow to reduce space in first list only. But they will appear on (2) (3) etc.

info_3066_2024.gif

0
Serigne Fallou
Serigne Fallou
Accepted Answer
1 year ago #166345

thank

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #166338

Hi Serigne

On typical Desktop computer it's looks totally OK, I checked.

info_3065_2024.gif

But indeed on smaller resolution it may be cut off...

0
Serigne Fallou
Serigne Fallou
Accepted Answer
1 year ago #166344

solvedthank u

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #166339

Here is Custom CSS fix for Laptops (1280px and smaller)

@media screen and (max-width: 1290px) {
.pagination .page-item .page-link { padding: 17px; font-size: 17px; line-height: 18px;}
.pagination .page-item {border-radius: 100%;}
}
0