CSS code to reduce the size of the scroll arrow on product images

I cant find the css code to reduce the size of the scroll button for the imagery on my product page, the button is currently cutting into my images its so big, can someone please help?

You can use this code to Website > Website Tools > Custom CSS. If it doesn't work, you can share link to a product, I can check it again easier

/* products arrow size */
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after {
    border-width: 3px 3px 0 0 !important;
    width: 2vw;
    height: 2vw;
}

Thanks @tuanphan but it hasnt changed the size it still looks like the below, the website isnt live yet so you wont be able to view it

On 3/8/2024 at 5:47 PM, YokeStudios said:

Thanks @tuanphan but it hasnt changed the size it still looks like the below, the website isnt live yet so you wont be able to view it

 

You can follow this to share url

https://forum.squarespace.com/topic/216243-how-to-setup-password-share-site-url/

Hi @tuanphan the website is now live, the issue is mainly on mobile view, you can see it here www.yoke-studio.com

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
button.chevron-next, button.chevron-prev {
    padding: 5px !important;
    min-width: unset !important;
}
}

thank you so much @tuanphan that has done it!