Why are variant-assigned images loading higher on mobile?

Store Design
,
1

Hello,

I am having a bug where the images i have assigned to variants are loading higher than other images on mobile. DAWN.

here is a screenshot.

all other images in the slideshow are aligned and fit fine but the 2 i have assigned variants too load like this.

Screen Shot 2023-12-16 at 10.19.24 pm.png
Screen Shot 2023-12-16 at 10.19.24 pm.png780×1550 189 KB

2

hello @massmonster
can you please share preview URL with me?

3

https://dirfnntz04cluzwy-55861510273.shopifypreview.com

it is only on mobile and only affects images assigned to variants.

4

Hello @massmonster

You can add code by following these steps:

  1. Go to Online Store → Theme → Edit code.

  2. Open your section-main-product.css file

  3. Paste the below code
    @media screen and (max-width: 749px)
    .product__media-list .product__media-item {
    width: calc(100% - 3rem - var(–grid-mobile-horizontal-spacing));
    height: 100%;
    }

5

Thank you but that did not work

6

Hello @massmonster

  1. Go to Online Store → Theme → Edit code.

  2. Open your section-main-product.css file

  3. Paste the below code

@media screen and (max-width:749px){

.product-media-container {
height: 100% !important;

}

}

7

This has made all images misaligned.

there is gap underneath all product images now