Still need help to remove black padding on product image-Dawn theme

Store Design
1

Hi, I need help on how to remove this black padding on top of my product images when you click to zoom in. It’s only apparent when viewing my website from an actual mobile screen. I’ve been trying to search for a solution the past weeks. I’m looking for a code to fix this where it doesn’t affect my other code for my product video. Please help asap. Thanks so much. Here is a pic as reference of the issue:

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

password: bahcri

75B0C798-7A79-437F-A4FA-AF7B9C573140.jpeg
75B0C798-7A79-437F-A4FA-AF7B9C573140.jpeg828×1612 94.6 KB

2

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store.

Regarding your concern about to remove the padding top when zoom the product media. You can try to add this code into your theme code

Step1: Online store > Themes > Edit code > search css and select your theme css file name base.css

Step2: Paste the code into the very end of the file

@media screen and (max-width: 767px){
img.global-media-settings.global-media-settings--no-shadow.active{
    padding-top: 0 !important;
}
}

Hope this helps.

Best regards,

PageFly

3

Hi! Thank you! The code works. But its affecting the size of my video. I wanted the video size to be the same ratio as my product photos. Would you know how to fix this? Thanks!

4

hi @Popcorn i checked but the code i gave you i didn’t see it is affected to the video, can you record a video for me to take a look? Thanks

5

Hi! Here’s a picture of what I’m seeing from my side. The product video is larger than my product images. :slightly_smiling_face:

IMG_7364.jpg
IMG_7364.jpg828×1792 151 KB

6

I also, have these codes that are in my file. One of the codes was used to scale the product video size to the same size as my product photo. Not sure if one of them is interfering or causing the issue. But here’s a copy of it. :slightly_smiling_face:

@media screen and (min-width: 749px) {
.product__media-list .deferred-media {
padding-top: 133% !important;
}
}

@media screen and (max-width: 749px) {
.product-media-modal__dialog .global-media-settings {
padding-top: 100vh!important;
}
}

@media screen and (max-width: 749px) {
.product-media-modal__dialog .global-media-settings video{
height: auto !important;
bottom: 0 !important;
margin: auto !important;
}
}

@media screen and (max-width: 749px) {
.product-media-modal__dialog .deferred-media__poster img{
width: 100% !important;
height: auto !important;
}
}

7

I think you should delete them all, and add them one by one, i’ve seen there are many css rules that conflict to others

8

Just double checked my size of my videos and it was completely my fault. I forgot to resize one of the videos. But your code works! Sorry about that.

9

Thank you so much for your help! And my apologies about the inconvenience!