Product Image Zooming in a lot when clicking on it

[azhamina]

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:

[PageFly-Richard]

Hi,

This is Richard at PageFly - Shopify Advanced Page Builder app.

Could you please provide me with the URL link to your store?

Hoping my solution helps you solve your problem.

Best regards,

Richard | PageFly

[BSS-TekLabs]

Hello @azhamina
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[azhamina]

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

[PageFly-Richard]

Hi,
You can 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;
	}	
}

[azhamina]

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

[PageFly-Richard]

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

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