Custom portfolio pagination arrows.

http://www.aqua-cobalt-ew6n.squarespace.com

Password: 1111

Hello,

I wanted to change the portfolio pagination arrows for a custom ones. I tried with the below code but it doesn't work well since is not well aligned and it doesn't show the previous arrow (please see attached). Also, the arrow is too small on mobile.

Any help would be much appreciated.

/* Gallery Previous Arrow Icon */
#itemPagination a.item-pagination-link.item-pagination-link--next .icon:before {
    content: "";
    background-image: url('https://static1.squarespace.com/static/669bcb29a25509507a64cf96/t/66cb4dfacbb5bc5c7caa648d/1724599802602/Flecha+02.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    width: 250%;
    height: 150%;
}

/* Gallery Next Arrow Icon */
#itemPagination a.item-pagination-link.item-pagination-link--next .icon:before {
    content: "";
    background-image: url('https://static1.squarespace.com/static/669bcb29a25509507a64cf96/t/66cb4dfab253041fc82c4b2b/1724599802669/Flecha+01.png') !important;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    width: 250%;
    height: 150%;
}

That worked, thanks so much @tuanphan. The only issue is that the arrows are too small in mobile view, do you know what's the necessary code for that?

Thx!!

On 8/27/2024 at 8:43 PM, mikelmuruzabal said:

That worked, thanks so much @tuanphan. The only issue is that the arrows are too small in mobile view, do you know what's the necessary code for that?

Thx!!

You can use this CSS code under

@media screen and (max-width:767px) {
#itemPagination a.item-pagination-link.item-pagination-link--next .icon:before {
    width: 30px !important;
}
#itemPagination a.item-pagination-link.item-pagination-link--prev .icon:before {
    width: 30px !important;
}
}

Just what it needed, many thanks @tuanphan 🙌