Product Image Zooming in a lot when clicking on it

Shopify Discussion

Topic summary

A Shopify store owner is experiencing product image zoom issues on mobile devices. When clicking product images, they zoom excessively, and the zoomed view conflicts with the site’s “categories” navigation element.

Initial Problem:

  • Product images zoom too much on mobile (desktop was already fixed)
  • Custom CSS code resolved desktop but not mobile

Solution Provided:
PageFly support and BSS-TekLabs offered assistance. The working fix involves adding CSS to the base.css file:

  • Set .product-media-modal__content gradient img to width: 100% !important
  • Set .product-media-modal__content gradient to max-width: 90% !important
  • Media query targeting screens max-width 767px

Secondary Issue:
After fixing the zoom, a new problem emerged where the zoomed image modal overlaps with the categories menu on mobile. An additional z-index CSS rule was suggested to resolve the layering conflict.

Status: Ongoing troubleshooting with community support providing code solutions.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

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:

azhamina_0-1725548715143.png
azhamina_0-1725548715143.png185×400 46 KB

1 Like
2

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

1 Like
3

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.

4

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

5

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;
	}	
}
1 Like
6

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

azhamina_0-1725713586482.jpeg
azhamina_0-1725713586482.jpeg185×400 12 KB

7

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

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