Hi,
I would like to hide the slideshow on my page so that it shows on mobile only. Please advise on what code I can use
Store url: https://webse.co.uk/?_ab=0&_fd=0&_sc=1
Theme: Dawn
Thanks in advance!
Topic summary
Goal: Hide the homepage slideshow on desktop/tablet so it displays only on mobile in the Dawn theme.
Context: The requester clarified the slideshow is under the header on the homepage and provided a correct preview link after initial confusion. Images were shared but not essential to the solution.
Solution provided:
- Edit theme code: Assets > component-slideshow.css.
- Add a CSS media query to hide the slideshow on larger screens:
@media all and (min-width: 750px) {
slideshow-component {
display: none !important;
}
}
Explanation: A CSS media query applies styles based on screen size. Using min-width: 750px targets screens 750px and wider (desktop/tablet), setting the slideshow component to display:none so it remains visible only on smaller (mobile) screens.
Outcome: The requester confirmed the fix worked. No further issues reported.
Status: Resolved; no open questions.
Hi @slatty , where is this section, which page?
Hi @MarinaPetrovic ,
the slideshow is on the homepage under the header
https://webse.co.uk/?_ab=0&_fd=0&_sc=1
please use this link
Go to edit code > assets > component-slideshow.css and add this:
@media all and (min-width: 750px) {
slideshow-component{
display:none!important;
}
}
2 Likes
Thanks so much @MarinaPetrovic !!
1 Like