How to make Debut Slideshow full screen on mobile?

[JordanM]

Hello guys,

so currently I am using the Debut theme but I don't like how the slideshow looks on mobile. There is a big white square with arrows on both sides which looks ugly to me. I want to make my slideshow appear on a full screen on mobile with only dots on the bottom for slide navigation. How can I make that?

That's how it appears now:

[Danishecom]

its the default style we can not edit. you can buy another theme or use it free one if you want to change the style. 

[renus]

you can use media query and css to remove white background and adjust arrow on slider , you need to post site URL so that i can give you css code

[JordanM]

Hi @renus ,

is it possible to do this on your Debut template and then tell me what code to add/edit because i am currently on pause and build plan?

Thanks in advance!

[renus]

You can setup a demo store by adding debut theme .... i will make changes on that

[dmwwebartisan · Accepted solution]

@JordanM 

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

For remove white space 

.slideshow__arrows--mobile {display: none !important;}
.slideshow__text-content--mobile {display: none !important;}
@media only screen and (max-width: 1255px){
#shopify-section-1596555781810.index-section {margin-top: -4rem !important;}
}

 Make slider full 

@media only screen and (max-width: 1255px){
.slick-dotted.slick-slider {height: 100vh !important;}
}

Remove pause button

@media only screen and (max-width: 1255px){
.slideshow__pause{display: none;}
}

Hope this helps.

Thanks!

[JordanM]

Hi @dmwwebartisan ,

thank you very much! This did the job perfectly. Awesome!

Best regards,

Jordan