That fixed it on the desktop version but ruined it on the mobile version, any way to make that command desktop specific? thank you
Topic summary
Main issue: Product image zoom opens full-screen on a Shopify “Ride” theme; the goal is to reduce its size or disable it.
What was tried:
- CSS change in base.css to limit the modal width (.product-media-modal__dialog { width: 50%; margin: auto; }) fixed desktop but hurt mobile.
- A mobile media query was suggested, but it reintroduced the issue. The preference shifted to fully disabling zoom.
- Hiding the modal via CSS caused page freezes.
Working solution implemented:
- Edit theme files: remove the modal opener code in Sections > main-product.liquid (and feature-product.liquid if present), then add CSS to hide the zoom icon (.product__modal-opener .product__media-icon { display: none !important }). OP confirmed this disables zoom without freezing.
Open questions/next steps:
- One user can’t find the equivalent code in the featured product snippet; their changes had no effect.
- Another wants to revert and asks where the removed code should be placed.
- A request to make the modal background semi-transparent (to show the page behind) remains unanswered; a screenshot was shared.
Notes: CSS = styling rules; media query = responsive CSS; modal = overlay window; Liquid = Shopify theme templating.
1 Like