How to make Debut Slideshow full screen on mobile?

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

 

 

0 Likes
Pallavi
Shopify Expert
792 104 116

Hello There,

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

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

Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
JordanM
Explorer
47 2 6

Hi @Pallavi ,

when i add the code this happens with my website:

Image 1.JPG

0 Likes
Pallavi
Shopify Expert
792 104 116

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!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
JordanM
Explorer
47 2 6

Hi @Pallavi ,

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!

0 Likes