Make Product Images Smaller On Desktop

[martujv]

Hello,

I was wondering how can I adjust the size of the product images on the product page on desktop version only.

Currently, on desktop, the images shown are too big and they don't fit on the visible page, which makes you scroll down a bit in order to see the full image.

I want to make the image a bit smaller so that it fits the natural dimensions of the screen and the whole image would be visible without the need to scroll down.

My theme is Stiletto and my website is www.truepodium.com (password: y22)

How it looks like: 

As you can see, the bottom of the image doesn't fit in the screen, and the whole gallery is too big.

How it should look:

Everything fits perfectly on the screen and the gallery is not too big.

Thanks in advance!!!

[topnewyork]

Hello,

1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom

img.image__img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

Thanks!

[martujv]

The image thumbnails are too close to the left edge of the screen. Is there any way to add a small gap there?

[topnewyork]

@martujv sorr for late reply, 
Try this one, this code working in myy desktop

ul.product-thumbnails__items {
    flex-direction: column !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    border-radius: 5px !important;
    text-align: center !important;
    margin-left: 6px !important;
}

[martujv]

The only problem now is that the selected image's thumbnail has a weird box around it:

Is there any way to remove that border? Or to add a black 0.2 opacity to the selected image instead? Something like this:

[topnewyork]

.product-thumbnails__item-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

[martujv]

Hello, tried the code but nothing changed