Reduce size of popup zoom product DAWN theme

Hi, when you click on a product image on the product page of the DAWN theme, it zooms full page size. I dont want to turn that off, I just dont want it to be full page, is there a way to make this smaller?

Hi, Welcome to shopify Community.

Please share your store URL and if your store is password protected then please share password also.

Thank you.

www.vitasharks.com

did you get this fixed? it is ridiculous on mobile too…

Nope. No answers from anywhere as yet :disappointed_face:

Sorry for late reply

please add below code in assets/section-main-product.css

.product-media-modal__content > * {
height:100vh;
}

Thank you Denishamakwana for the solution.

It’s working but see my code for reference.

I need to make changes to suit with my image.

.product-media-modal__content > * {
height:50%;
width:50%;
}

Hey, I cant seem to make it work for me.. Where exactly in the section-main-product you added the code? At the bottom, middle, or? Thanks!

Hey guys, with the second code - this one .product-media-modal__content > * {
height:50%;
width:50%;
}

it did work.

But now it is behaving super weird on mobile. On desktop it looks great, It just zooms normally, but on mobile when you click on the picture instead of zooming in, it actually zooms out…

reussirwi.com

Thats my website, please can you check and see what I mean and if there is any solution?

Any help please @Denishamakwana ?

Would be super grateful

Did you find an acceptable solution here? I am trying to do the same but can’t seem to figure it out. The images are way way way too big when the customer clicks to zoom!

did you figure it out?

for me it worked when i changed the percentage from 50% to 100% in both height and width :slightly_smiling_face:

i guess you can just adjust the percentages until it fits best.

Hi Jacquline,

Did you happen to find a solution to this problem. If so, any assistance would be much appreciated. Thanks

That worked for me in the Ride Theme:

.product-media-modal__content > * {
height:75vh;
width:75vh;
background: transparent;
}

Thank you! This solution works for me, it’s zoomed in a bit on mobile, but it works

Works only on mobile (thanks for that). But do you have the same solution for desktop? I aplied as you suggested and I see changes on mobile when I switch between %, but that doesn’t have any effect on desktop.