Product images zoom full screen on desktop, how can I reduce to 50%? Dawn Theme

Technical Q&A
, ,
1

Hi there, I’ve looked through all previous queries about this and can’t seem to find a suitable answer.

I’m setting up my store in the Dawn theme and I’ve found that when clicking a product image to zoom, it enlarges it full screen (my product images are 1000x1000 so this makes them appear blurry as well) which is way too big.

In the customize theme settings, there’s only the option to turn off the zoom (lightbox) not make it smaller.

Is anyone able to tell me where in the code I can edit to reduce the size of the zoom either by % or some other factor?

shop url: https://shop.elitehs.au
pass: athopi

Thanks in advance

fullscreenimagezoom2.png
fullscreenimagezoom2.png2521×1339 296 KB

fullscreenimagezoom.png
fullscreenimagezoom.png2549×1347 302 KB

1 Like
2

HEllo @robehs
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->section-main-product.css
add this code at the end of the file.

@media screen and (min-width: 750px) {
.product-media-modal__dialog .global-media-settings--no-shadow {
height: 50% !important;
width: 50% !important;
}
}

result

1.png
1.png1300×919 141 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

Thank you! That appears to have worked for desktop however mobile still seems to zoom huge, is there another string of code that will fix the mobile side?

Thanks in advance