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' %}
<style>
.product-media-modal__content.gradient {
max-width: 65em;
margin: 0 auto;
}
</style>
{% 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 · Accepted solution]

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?