Solved

Slideshow issues on mobile (Debut theme)

salisboury
Tourist
4 0 0

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.

Accepted Solutions (2)

NerdCurator
Shopify Partner
378 70 103

This is an accepted solution.

@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; }
}

 

 

Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 8+ years.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com

View solution in original post

NerdCurator
Shopify Partner
378 70 103

This is an accepted solution.

@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;
}
}
Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 8+ years.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com

View solution in original post

Replies 6 (6)

NerdCurator
Shopify Partner
378 70 103

This is an accepted solution.

@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; }
}

 

 

Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 8+ years.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com
salisboury
Tourist
4 0 0

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

NerdCurator
Shopify Partner
378 70 103

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

Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 8+ years.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com
salisboury
Tourist
4 0 0

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

NerdCurator
Shopify Partner
378 70 103

This is an accepted solution.

@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;
}
}
Believes in delivering optimizing web solutions | Shopify Partner | Working as a web developer for last 8+ years.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email me: info@nerdcurator.com
salisboury
Tourist
4 0 0

Thanks a lot! You solved everything.