How to make Debut Slideshow full screen on mobile?

Technical Q&A
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

2

Hello There,

add code assets/theme.scss.liquid bottom of the file

@_media only screen and (max-width:767px) {
.slideshow–medium {height: 650px;}
}

Thanks!

3

Hi @ZestardTech ,

when i add the code this happens with my website:

Image 1.JPG
Image 1.JPG1968×924 52.3 KB

4

Hello There,

Remove old code and add this one

add code assets/theme.scss.liquid bottom of the file

@_media only screen and (max-width:767px) {
.slideshow–medium {height: 650px;}
}
}
Thanks!

5

Hi @ZestardTech ,

I deleted the old code and added the new one but it still doesn’t work. I would be pleased if you have any other ideas.

Thanks in advance!