How do I disable product page zoom on mobile version Dawn Theme 10.0

[1989streetwear]

Hello I would like to disable the product page zoom on the product imgs only on mobile version on Dawn Theme 10.0

Anyone can help?

website: 1989streetwear.com

[oscprofessional]

Hello @1989streetwear 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (max-width: 749px){
span.product__media-icon.motion-reduce.quick-add-hidden.product__media-icon--hover {
    display: none;
}
}

[1989streetwear]

Hi @oscprofessional , this code only hides the zoom icon. I would actually need to disable the zoom on mobile version. What should I do?

[oscprofessional]

@1989streetwear 
Hello,
Add This CSS Go to Online Store > Select Theme > Edit Code > section-main-product.css

@media only screen (max-width:767px) {
.product__media-zoom-hover, .product__media-icon--hover {
	display: none !important;
}
}

Like This

[PageFly-Richard]

Hi @1989streetwear 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

@media(max-width: 749px){
.product__media-icon--hover {
   display: none !important;
}
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

[1989streetwear]

Hi @PageFly-Richard , this code only hides the zoom icon. I would actually need to disable the zoom on mobile version. What should I do?

[PageFly-Richard]

you can try this code

@media screen and (max-width:749px){
   .product-media-modal[open]{
       display: none; 
       visibility: hidden;
    }
}