Can anyone please tell me how to change the slideshow height to automatically adjust in shopify's Debut theme?

[Kaichi_Zhang]

Hi everyone,

I'm setting up a store using shopify's free debut theme but I'm having trouble with its default slideshow. The image I use have a resolution of 1600px by 600px, when it was viewed in desktop mode the quality is fine, but once I switch to smaller screen mode it becomes blurred.

I assume the problem is the default slick slider trying to keep the same pixel for height and adjust the width accordingly, but all I want is to keep the aspect ratio of the images the same for all screen sizes so it wont mess up with the image quality. Something like this site has  - https://www.throttledownspeedco.com/ Can anyone help me please? Any help will be appreciated!

Thanks!

[Jason]

Hey Kaichi,

The slideshow will show different images depending on the size of the screen. Take a look in the section slideshow.liquid to see the CSS background styles being created for the different viewport sizes (around line 35). If you find the image sizes are not right for your needs you can adjust them there.

As for the height of the slider - those css breakpoints is in theme.scss.liquid. Doing a search of that file for "Hero slider" should jump you to the right section.

[Kaichi_Zhang]

Hi Jason,

Thanks for your help, I did change my image sizes to the sizes inside the slideshow.liquid, for large browser the image quality is perfect, however when I view it on my smartphone the slide becomes blurred. So im thinking it has something to do with the height. Can you please tell me what and where to change the code of Hero Slider in theme.scss.liquid so that the aspect ratio of the image slider do not change when viewed on smaller screen?

Thanks.

[Daniel_Ward]

Same issue for me, any fix yet?

[Michelle_Amurao]

I'm having the same issue.  My images in the slideshow on my ipad pro look perfect but then when I view the website on a desktop, the images are zoomed in more.

[lawrence_choo1]

Same issue too, any one can assist?

[lawrence_choo1]

Hi,

Anyone can assist on this?

[Nicholas_Triggi]

Same issue for me, the Debut theme is great but I really wish the theme would properly resize slideshows based on the width of the browser.

[Claudia_Howard]

Me, too! And not just the homepage header, it happens with the Collection images. The colletion header image looks fine on the individual collection pages - and fuzzy when displayed as a Collection List on desktop - (clear on mobile).

Please Shopify, let us know recommended size to display correctly on all devices and in both the Collection List and Collection Header.

[Momof6]

i went to theme.scss.liquid

did a search (ctrl+f) .slideshow

.slideshow {
  overflow: hidden;
  height: $slideshow-height-small - 150;
  margin-bottom: 0;


and changed to

.slideshow {
  overflow: hidden;
  height: $slideshow-height-small - 300;
  margin-bottom: 0;

let me know if this works for anyone.