Reducing Zoom on Slideshow Images Envy Theme

Store Design
1

Hi everyone, I was able to get help from this community on reducing the height of the slideshow in Envy them using the below code:

.slideshow--full-screen {
    height: 70vh !important;
}

But now the issue occurs where the image gets blown up, I believe to fit the width. Is there a way to keep the width what it is but not have the image so blown up?

www.veriant.com vs. the image below that has the modified height code from above, but as you can see the image just blows up instead of fitting to the new dimensions.

t.

Capture.JPG
Capture.JPG872×1008 57.2 KB

1 Like
2

@learningtoday

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

1 Like
3

@KetanKumar I am using Microsoft edge. Do you know what the ideal dimensions of the pictures should be?

1 Like
4

@learningtoday

depend on your graphic banner

5

@KetanKumar Sorry not sure what the exactly means? For some reason andy image I upload in the new dimension just doesn’t show up correctly, the slideshow zooms in on the picture from the top so I have no way of centering the image.

1 Like
6

@learningtoday

yes thanks for update yes if center all garphic then show

7

@KetanKumar The image shows, but it shows incorrectly. It seems to be zooming into the image and changing the aspect ratio of it.

1 Like
8

@learningtoday

yes please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-index.min.css ->paste below code at the bottom of the file.
@media screen and (min-width: 769px) {
.slideshow--full-screen ul.slides img {object-fit: contain;}
}
9

@KetanKumar it’s cutting off the image now and for some reason there is a white space:

Capture1.JPG
Capture1.JPG867×437 11.4 KB

1 Like
10

@learningtoday

you have used same image or change it?

11

@KetanKumar same image, tried it with different types of same images and it does the same thing

1 Like
12

@learningtoday

i have look at my screen

KetanKumar_0-1636046920099.png
KetanKumar_0-1636046920099.png1920×1080 282 KB

13

@KetanKumar I am confused. I haven’t published it so you won’t be able to see it, but my preview is showing it cut off.

1 Like
14

@learningtoday

sorry but i have check all my end i can’t see issue sorry

15

Hi,

I can’t seem to find the file theme-index.min.css in Assets nor anywhere else. Any chance this file has a new/different name? I also tried creating a file under Assets with that name and using the code provided, but it did not reduce the height of the Slide Show (nothing changed).

Any help?

Thanks!

Juan