Debut Theme Slideshow On Mobile

Highlighted
Tourist
9 0 2

I'm having an issue with how the slideshow looks on the mobile. I've found the bit of code (line 35) in the slideshow.liquid file that changes the size of the slideshow based on the size of the screen looking at it and ive set it to 2000x resolution so its not as blurry as it originally was. However, I would like to set it so the slideshow is contained within the screen size rather than zoomed in on mobile, the image used is not suited for being fixated on the middle part. I know how to do this in the code using background-size: 100%; or background-size: contain; but what this does is leave a ton of white space below the slideshow which looks awful. 

Does anyone know how I can do this without leaving all that white space?

0 Likes
Shopify Expert
2686 67 685

Hey Jim

you should either move the image out of the backgroung and into an <img...> and then amend several classes to make it scale without cropping, or, you may try the padding-bottom trick, like so:

.slideshow.slick-slider {
    height:auto; /* override the height value from the section.seettings */
}
.slideshow .slideshow__image {
    padding-bottom: 25%; /* set aspect ratio of 4:1 */
    position:relative;
}

padding-bottom of 25% will force your images aspect ratio to be fixed at 4:1, 75% -- 4:3 and so on...

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
Tourist
9 0 2

Thanks Tim, that was super helpful!

0 Likes
Highlighted
New Member
5 0 0

Do you have more details on where to add this?  I am looking to do this for the image with overlay text section.

0 Likes
Highlighted
Shopify Expert
2686 67 685

This should go to the bottom of the theme.scss.liquid Asset, but it is for Debut, not for Venture, and would not work.

The concept for Venture should be the same, selecting the proper class names will probably help.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
New Member
5 0 0

Hi, sorry for the confusion, I am working on another site with the debut theme.  I tried this fix, but it doesn't work for the image with text overlay.  I am guessing the variable is different than slideshow, would you happen to know what it might be?

0 Likes
Highlighted
Shopify Expert
2686 67 685

Hi there, newer version of debut requires different code, look in this thread.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes