Issue with Mobile Product View

[Esra47]

Hello,

I have a problem with the mobile product view.

Some images are only displayed halfway, as shown in this example:

Here the link: https://et1xgdlyz2fwrbih-71988969740.shopifypreview.com 

Is it possible to fix this problem? 

[TerenceKEANE]

Hi!

In fact, this issue is related to image sizing. If I remember correctly, you previously had a problem with the 'slider'. Sometimes the image issue doesn't give the exact result you want with code.

Now, the resolution of the images you uploaded is as follows:

Desktop: 713x1070

Thumbnails: 116x116

So the thumbnails version is 1:1 and the other is 2:3, which is causing the issue.

The code below will stabilize the ratio for both. You can try it if you want?

    .product--small .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
        aspect-ratio: 2 / 3;
    }

Terence

[Esra47]

Where should I insert the code?

[TerenceKEANE]

Sorry, I forgot to tell you.

Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes.

 .product--small .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
aspect-ratio: 2 / 3;
}

 

[Esra47]

I tried, but it didn't work. Is it possible that I inserted the code in the wrong place?