How to make Debut Slideshow full screen on mobile?

Shopify Discussion
1

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:

Image 1.JPG
Image 1.JPG925×922 50.7 KB

1 Like
2

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.

3

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

4

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!

5

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

6

@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!

1 Like
7

Hi @dmwwebartisan ,

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

Best regards,

Jordan