How can I prevent images from stretching in a website slideshow?

Store Design
1

Hello,

I have a slideshow on my website, but, when the width of the screen changes, such as, a smaller/larger tab or a different device’s screen, the images stretch/shrink horizontally. How can I prevent this and preserve the dimensions of the photos?

Thanks in advance

Screenshots:

bmdms_0-1603828826964.png
bmdms_0-1603828826964.png1829×599 99.7 KB

bmdms_1-1603828852328.png
bmdms_1-1603828852328.png832×382 55.1 KB

2

Please provide website url and if your store is password protected then also provide password

1 Like
3

Here is the website

4

Please place this code at the end of theme.scss

.home-slideshow .slick-slide img {
height: unset !important;
}
5

There is no themes.scss file for this website. Do you know where I should put it?

6

please place this code in theme.liquid in betweeb Like

// my given code here
1 Like
7

Hmm, it still looks like the slideshow, thus the images, are still being stretch based on width of window.

8

Please place this code at the end of file where the code is written for that content. the file may be Section → hero-slider.liquid.

Because it is overwriting my code

paramSoft_0-1604117391823.png
paramSoft_0-1604117391823.png1920×1080 268 KB

2 Likes
9

Awesome! It worked. Thank you so much.

Could you explain what the code does? Does it just lock the height of the img?

10

I just set the height to under where before height was fixed so that images were streched.

2 Likes