Thumbnail - Refresh theme

[Ryad.detail]

Hello, I have a problem that I have not been able to solve through this topic and with the AI.

I am trying to reduce the size of the images (under the main image) on my product page, they are landscape format images at the base but which are in a square format and I can’t change this.

Thank you for your help. I am on the refresh theme, my shop is: autodetail.fr

[Laza_Binaery]

Hi @Ryad.detail

Try this code in Edit Theme > Product page on your product information/main-product section, in the Custom CSS setting, add

.thumbnail {
    height: auto;
}
.thumbnail img {
    height: auto;
}

That should result in this

If you do have an issue, try the alternative code

.thumbnail {
    height: auto !important;
}
.thumbnail img {
    height: auto !important;
}

[dmwwebartisan]

@Ryad.detail

Please add the following code at the bottom of your css file.

.thumbnail.global-media-settings img {
    height: auto !important;
}

Hope that works!

[tim_tairli]

The code which defines thumbnails aspect ratio is here, and it’s hardcoded for square image:

assets/section-main-product.css

100% is for square, 50% would fit 2:1 image.

So you can use code like this in Product Information section “Custom CSS”:

.thumbnail-list__item::before {
  padding-bottom: 53.82%;
}

This should be like this:

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[Ryad.detail]

Thank you very much for your help from France ! I resolve the problem.

[tim_tairli]

This is not the best solution because the arrows are now off:

And this is why:

[SealSubs-Roan]

Hi @Ryad.detail

In Refresh, the thumbnail images have the same ratio as the main media container; for this reason, landscape images will look square. You can make them visually smaller with CSS by selecting the thumbnails list and giving it a smaller max-width. For example, to make the items smaller in the thumbnail container or media thumbnail class without influencing the main image.