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!
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.
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?
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.