How to make Debut Slideshow full screen on mobile?

Solved
JordanM
Explorer
47 2 6

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

 

Danishecom
Excursionist
209 6 18

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. 

0 Likes
renus
Tourist
54 2 6

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on renusharma7@gmail.com regarding any help
Shopify Expert | Skype : renusharma99
0 Likes
JordanM
Explorer
47 2 6

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!

0 Likes
renus
Tourist
54 2 6

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on renusharma7@gmail.com regarding any help
Shopify Expert | Skype : renusharma99
0 Likes
dmwwebartisan
Shopify Partner
4570 1028 1321

This is an 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!

 

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
JordanM
Explorer
47 2 6

Hi @dmwwebartisan ,

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

Best regards,

Jordan

0 Likes