Why is the product media modal toggle not working properly on desktop with Dawn theme?

[nevadaskye]

Using Dawn theme I am encountering an issue where when clicking on a product photo to expand the image, the button to close the visibility of this section is not correctly working. Instead of having to click the button to close, the section is closing if clicked anywhere on the screen. This issue is only occurring on the desktop version, while functionality is working correctly for on the mobile version. Could anyone help with fixing this issue please? Many thanks!

Image example of section attached.

 

https://eggculture.com

password: uIGoGb0f8H8fx1B

[diego_ezfy]

@nevadaskye 

You have some custom code forcing the images to always be of a specific width, this is what is causing this issue. To fix this:

1. In your Shopify Admin go to: online store > themes > actions > edit code

2. Find Asset > base.css and paste this at the bottom of the file:

@media screen and (min-width: 750px){
    .product-media-modal__content > * {
        width: 100% !important;
    }
}

If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,

Diego

[nevadaskye]

Thank you; however, even with this implemented I am able to close the pop up gallery by clicking outside of the exit-button. 

[nevadaskye]

It appears to me that .media-modal may be the cause of the issue