I have to differnt slide shows on my website, one for desktop and one for mobile. But the scroll bar is not hidden for the hidden slide show how can I fix that? thethinkingdesk.com
@Mtvail84 can you please screenshot where you have this issue?
You seem to have CSS like this in “Custom CSS” settings of these sections:
(and a similar code for desktop with max-width)
@media (min-width: 750px) {
.slideshow {
display: none !important;
}
}
Change them to
@media (min-width: 750px) {
slideshow-component {
display: none !important;
}
}
Or even
@media (min-width: 750px) {
{
display: none !important;
}
}
This last one can only work in section “Custom CSS” setting
I tried the slideshow-component and it said “that doesn’t exist in this section”
Can be picky.
Try the last one.
No, your site still shows the old code.
You need to press save, reload the page and make sure the code is still as shown.
“Custom CSS” sometimes does it when it does not like your code – you click save but content is not updated without warning.
Please add this code to the Custom CSS of the Slideshow section for mobile.
@media (min-width: 750px) {
slideshow-component { display: none; }
}
Add this code to Custom CSS of the Slideshow section for desktop
@media (max-width: 749px) {
slideshow-component { display: none; }
}
Hello, @Mtvail84
1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.
@media screen and (min-width: 750px){
.slideshow__controls.slideshow__controls--top.slider-buttons.slideshow__controls--border-radius-mobile {
display: none !important;
}
}
Thank You!
This worked! Thank you!