Can I adjust the zoom on product photos in Whisk template?

Store Design
1

On my website (Whisk template), the product photos look great but photo 4 for each product is the nutrition facts. This photo is zoomed in to where not all of the information can be read. Can this be edited in code?

Example: https://udderlynuts.com/products/caramel-cookie-crunch-peanut-butter

Thank you!

1 Like
2

StephenM88_0-1704841037148.png
StephenM88_0-1704841037148.png1657×986 206 KB

1 Like
3

@StephenM88 , go to styles-base.css and add the following code :

li#Slide-template--16372461633697__main-6735219785889-31188517781665 .media-gallery__preview-image img {

  object-fit:contain !important;

}
4

Hey! I tried that but it doesn’t seem to have had any effect.

1 Like
5

@StephenM88 , Add this code instead:

li#Slide-template--16372461633697__main-6734475460769-31188421279905 img {
    object-fit: contain !important;
}
6

That worked beautifully for that product but the rest of my catalogue still has the issue - Is there a way to do it for all products?

1 Like
7

@StephenM88 , Add the following code :

ul.media-gallery__list .media-gallery__item:nth-child(4) img {
    object-fit: contain !important;
}