Make product image smaller on product page

[MollieHammond]

Hi all, 

Hope everyone had a great weekend. I'm reaching out as we recently made some changes to our Shopify store, including changing the product images on the product page from a grid to a caurosel. Unfortunately now the main product image is slightly too big, and it is ruining the resolution of the images. Could anyone advise how to make this image slightly smaller? It is already as small as our themes standard settings allow. 

Theme: Palo Alto

URL to product page example: https://www.coffee.prestigerepairs.com.au/collections/manual-coffee-machines/products/la-pavoni-espe...

Thank you for any assistance. 

[Guleria]

Hello @MollieHammond ,

Try this css

@media screen and (min-width: 768px) {
.product-single__media-slide {
    width: 70% !important; 
    margin: 0 auto;
}
}

Add this css in file theme.css at bottom

Regards
Guleria

[MollieHammond]

Hey, 

That made the images smaller but it now leaks into the previous and next image on either side. 

[MollieHammond]

Hey,

not sure if you saw my reply above or not, but did you happen to know how to do this without making the images overlap?