Works great for desktop but produces narrow sections of zoomed image on mobile. Anyone have a fix to add to this code?
Update: Using em instead of % on the max width fixes the mobile and responsive problems.
Topic summary
Product image zoom opens full-width on Studio theme; request to cap the zoomed modal on desktop and mobile.
Proposed fix: add CSS targeting .product-media-modal__content.gradient with a max-width and centered margin. Insert within {% if template contains ‘product’ %} … {% endif %} in theme.liquid (before ) or place in a “Custom Liquid” block on the product page.
Initial result: Using percent (%) for max-width works on desktop but shows a narrow, cropped strip on mobile. Update: switching to em units (e.g., max-width: 65em) improves mobile responsiveness. Example used in Custom Liquid under Product Information: .product-media-modal__content.gradient { max-width: 65em; margin: 0 auto; }.
Notes:
- One check indicated image zoom was disabled on the referenced store.
- Several confirmations that em-based sizing “looks way better.”
- An attachment shows a remaining mobile display issue for one user despite desktop success, suggesting theme or configuration differences.
Definitions: “em” is a CSS unit relative to font size; “Custom Liquid” is a Shopify content block for adding custom code.
Status: Partially resolved. Em-based max-width is the leading workaround; mobile issues may persist for some setups, no universal fix confirmed.