Why can't I change slides on mobile in Debut theme?

Store Design
1

Hi,

I have issues with the slideshows on my website ( www.sugumarket.com) on mobile.

On desktop there are no issues, but on mobile I am unable to change slides unless I flip the phone to put it in landscape mode.

Thank you.

2

@salisboury You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of theme.css file.

@media only screen and (max-width: 640px) { 
.slideshow__controls{ top: 80%; right:0; left:0; }
.slideshow__arrows{ display:block; }
}
1 Like
3

@NerdCurator Thank very much for your help, it works!

4

@salisboury Glad I could help. Let us know if you have any other issues too.

5

@NerdCurator It’s not an issue, but I would like to know if there’s a way to add a gray filter on the slideshow when the phone is in portrait mode. The same way the grey filter is applied on the slideshow on desktop, and when the phone is in landscape mode.

So that the text becomes easier to read.

Thank you.

6

@salisboury Please add this code in same theme.css and update the previous code I have sent.

@media only screen and (max-width: 640px) { 
.slideshow__controls{ top: 80%; right:0; left:0; }
.slideshow__arrows{ display:block; }
.slideshow__overlay:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-image-overlay);
    opacity: var(--opacity-image-overlay);
    z-index: 2;
    display: block !important;
}
}
1 Like
7

Thanks a lot! You solved everything.