Need help ASAP with product image code for mobile please! :)

Store Design

Topic summary

Main issue: On a Shopify store’s mobile product page, tapping an image to zoom opens a media modal with a black bar/background at the top. The user wants the image to fill the view when zoomed without the black area. Screenshots are provided and are central to visualizing the problem.

Proposed fix: Edit assets/base.css and change the rule for “.product-media-modal__dialog .global-media-settings”. Replace “padding-top: 100vh!important;” with “padding-top: 0;” (one suggestion also added “width: 100%”). This removes the black top area for images, as shown in the provided result screenshot.

Conflict: The original “padding-top: 100vh!important;” had been added earlier to fix a product video formatting issue. Applying the new CSS fixes image zoom but reintroduces the video issue. The user needs a solution that preserves the video layout while removing the black area for image zoom.

Key terms: 100vh is a CSS unit equal to the full viewport height; base.css is the theme stylesheet; the media modal is the overlay used for zooming images/videos.

Status: No combined solution posted yet; request remains open for a fix that handles both images and videos without regressions.

Summarized with AI on February 10. AI used: gpt-5.
1

Hi, I need help with removing this black background when zooming in on my product photos in mobile view. It immediately redirects me to a black background on top of my product image when I click on the photo to zoom in. Below, is an example. I think it has to deal with the code for the padding. Not too sure. Any help would be appreciated!

Store url: https://lua-wolves-crystals.myshopify.com/

password: bahcri

Photo of product image when I click on it
Photo of product image when I click on it1502Ă—1345 109 KB

1 Like
2

Hi @Popcorn ,

Go to edit code > assets > base.css and find this element:

.product-media-modal__dialog .global-media-settings {
    padding-top: 100vh!important;
}

Replace it with:

.product-media-modal__dialog .global-media-settings {
    padding-top: 0;
    width: 100%;
}

Here is the result:

Screenshot 2022-08-20 at 18.44.05.png
Screenshot 2022-08-20 at 18.44.05.png932Ă—1122 188 KB

3

Thanks for helping. If I replace the other code, it messes up my video product format. I’m looking for a code that zooms into my product photo when i click on it, not zoomed in on a black border on top of my image. Right now, my product photo already zooms in when you click on it, but it has this black part on top of my photo that I’m trying to get rid of. Hope that makes sense.

4

Hi @Popcorn , then find this element:

.product-media-modal__dialog .global-media-settings {
padding-top: 100vh!important;
}

And replace it with:

.product-media-modal__dialog .global-media-settings {
    padding-top: 0;
}
5

Hi, I actually need the original code to fix my product videos. Thats the code someone gave to fix an issue I had with my video. If I replace the code with yours, the issue with the video comes back. But it did fix my product photo issue. But I’m looking for a code to fix both solutions. Or where your code doesn’t affect the original code.