Product Image Zooming in a lot when clicking on it

Shopify Discussion

Topic summary

A Shopify store owner is experiencing product image zoom issues. When clicking product images, they zoom excessively—particularly problematic on mobile devices despite desktop fixes using custom CSS code.

Initial Problem & Solution:

  • Custom CSS code resolved desktop zoom but mobile remained broken
  • Developer provided CSS targeting .product-media-modal__content.gradient with max-width and width adjustments for screens under 767px
  • This successfully fixed the mobile zoom issue

Secondary Issue:

  • The zoomed image modal was overlapping with the site’s “categories” navigation on mobile
  • Resolved by adding z-index: 999 to the product media modal element

New Concern:

  • User reports unexpected extra spacing/padding appearing above product images after clicking them on some products
  • This latest issue remains unresolved in the thread

All solutions involve adding CSS code to the theme’s base.css file.

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

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

IMG_CBDA54B41E72-1.jpeg
IMG_CBDA54B41E72-1.jpeg828×1792 138 KB