Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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; }
}
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;
}
}
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; }
}
@salisboury Glad I could help. Let us know if you have any other issues too.
@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.
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;
}
}
Thanks a lot! You solved everything.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024