How can I optimize slideshow images for different screen sizes?

Store Design
1

The slideshow on my homepage is cropped on the full screen/large desktop view. Is there any way to make sure that the slideshow images look good on each kind of screen? My website is www.littletoesch.com Thank you!

@KetanKumar

@oscprofessional

1 Like
2

@bgold

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.
.slideshow-wrapper:not(.slideshow-same-height) .slick-list, .slideshow-wrapper:not(.slideshow-same-height) .slick-track, .slideshow-wrapper:not(.slideshow-same-height) .slideshow-content-wrapper {
    height: 80vh;
}
1 Like
3

Hi @bgold ,

Go to Assets > theme-index.min.css and paste this at the bottom of the file:

@media (min-width:721px) {
	.slideshow-wrapper:not(.slideshow-same-height) .slick-list, 
	.slideshow-wrapper:not(.slideshow-same-height) .slick-track, 
	.slideshow-wrapper:not(.slideshow-same-height) .slideshow-content-wrapper,
	.slideshow-wrapper:not(.slideshow-same-height) img {
		height: 100% !important;
	}
}

Hope it helps!

1 Like
4

Thank you!

1 Like
5

Hey there, i’m facing the same problem and this code isn’t helping, can you help me?