Dawn - Mobile - Decrease Product Image Zoom Size

Technical Q&A

Topic summary

Main issue: Product image zoom on mobile (Dawn theme) appears too large; requester suspects a small CSS change in the main product section file.

Proposed solution: Add CSS in the theme’s Assets (section.main-product.css) to set a fixed width for images in the zoom modal (selector: .product-media-modal__content > *). Media queries suggested:

  • Desktop (≥750px): width: 600px
  • Mobile (≤749px): width: 600px
    A reference guide link was provided for step-by-step instructions.

Follow-up requests: The requester asked for a concrete snippet/location for the mobile change. The helper advised navigating to Themes → Assets to find the CSS file and referred again to the external guide. Another participant requested an error screenshot to assist further.

Status: No confirmed resolution yet. Next steps include locating section.main-product.css in the theme assets, applying the media queries to adjust zoom modal width, consulting the linked guide, and providing a screenshot if issues persist.

Notes: “Dawn” is a Shopify theme; media queries control styles by screen width; the zoom modal uses the .product-media-modal__content container.

Summarized with AI on February 10. AI used: gpt-5.
1

Image Zoom Size for Mobile is too big.

I think a line or two need changes in the sections-main-product.css

thank you

2

Hi @deakon !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation.

Please add this code in this section;

(section.main-product.css) file to adjust the zoom for mobile and desktop.

/desktop/

@media screen and (min-width: 750px) {
.product-media-modal__content > * { width: 600px; }
}
/mobile/
@media only screen and (max-width: 749px) {
.product-media-modal__content > * { width: 600px; }
}

You can also use this link;

https://ezfycode.com/blog/dawn-theme-how-to-fix-zoom-images-size-mobile-desktop

Best Regards;

Pagefly

3

could you send a sample section of the main-product.css code where I change mobile?

4

@deakon Bro go to themes---->Assets

You will find this

5

Bro @deakon You can use link for more information thanks.

6

Hi @deakon ,

Can you send me the error screenshot, I will help you check it