New Shopify Certification now available: Liquid Storefronts for Theme Developers

Product Media Modal Toggle Issue Desktop

nevadaskye
Excursionist
32 3 0

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.

Screen Shot 2023-06-09 at 1.22.31 PM.png

https://eggculture.com

password: uIGoGb0f8H8fx1B

Replies 3 (3)
diego_ezfy
Shopify Partner
2880 549 846

@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
Excursionist
32 3 0

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

nevadaskye
Excursionist
32 3 0

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