Product Image Zooming in a lot when clicking on it

[Lover]

Hello! Im facing two isses. The first is that when I press on a product image, the image zooms in like crazy. I edited it using this code below - which helped on desktop but has not helped on mobile (ill attach the image below).

Code used:

{% if template contains ‘product’ %}

.product-media-modal__content.gradient { max-width: 65em; margin: 0 auto; }

{% endif %}

Mobile Product Image when clicked:

Note that this is the studio theme.

[Raj-webdesigner]

Can You share your Site Url?

[Lover]

Here you can see the issue here: https://loverlosangeles.com/products/black-zip-up

[Raj-webdesigner]

Add this code in your edit code > base.css file

@media screen and (max-width:767px){
	.product-media-modal__content.gradient {
	    max-width: 90% !important;
	}	
	.product-media-modal__content.gradient img {
    	width: 100% !important;
	}	
}

[Lover]

That worked!!! any idea how to make it open in a way that doesnt clash with “categories” as seen below on mobile?

[Raj-webdesigner]

Add this css in your edit code > base.css file

.product-media-modal[open]{
    z-index: 999 !important;
}

[Lover]

Thank you! that worked out!!!

[Lover]

Hello I have another question! For some reason there has been extra space and pading over the image before we click it in some products now?