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

[robehs]

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

[GTLOfficial]

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

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

[robehs]

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

[EFOLI-Syn]

Hello @robehs,

Please add this following code into your base.css file.

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