Changing image thumbnails in Debut Theme

[zhenyathekid]

Hi!

I using Debut theme. I have 5 pictures of my product and I want to put all of them in 1 slider under main picture. By default there are 3 pictures and customer should slide to see 2 more. 

How can I make them smaller but in 1 row?

website link: perfectodo.com

[dmwwebartisan]

@zhenyathekid 

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (min-width: 990px){
.product-single__thumbnails-item--medium {flex: 0 0 20% !important;}
}

Hope this helps.

Thanks! 

[zhenyathekid]

@dmwwebartisan 

Thanks that worked for pc. How can I optimize it for mobile? Mobile is more important for me.

[dmwwebartisan · Accepted solution]

@zhenyathekid 

Please add the following code for the mobile.

@media only screen and (max-width: 749px){
.product-single__thumbnails-item-slide {width: 62px !important;}
.thumbnails-slider__prev {right: -30px !important;}
.thumbnails-slider__next {right: -30px !important;}
}

Thanks! 

[zhenyathekid]

Thanks!
it worked.

[Mokai]

Hello,

I was wondering if there are more than 5 images, how do you turn the product thumbnails into a slider/carousel? I am also using debut theme.

Thank you!

My Shopify store is www.paragonnshop.com

[zhenyathekid]

@Mokai 
Use settings above

[dmwwebartisan]

@Mokai 

Please provide your store password.