-
Posts
-
Hi,
I’ve had a look through the forums and tried some of the solutions but cannot seem to get this to work. I have 2 fullscreen sliders and want to show one on desktop and one on mobile whilst hiding the other one. I have them stacked on the page on top of each other (desktop on top).
The issue I am having is that they both seem to have the same DIV ID… in this case the are both have the DIV ID=”fullscreen_slider_0″
The code i was looking at to use was along these lines (but changing the DIVs to suit). A link to the page is in the private content bit.
@media only screen and (min-width: 768px) {
div#slideshow-1{
display: none !important;
}
}@media only screen and (max-width: 767px) {
div#slideshow-2 {
display: none !important;
}div#slideshow-1 {
display: block !important;
}
}do you have a link for us? This is easier because i can see if a hint will work or not. I use for that firebug on firefox. Allthough today all browsers got a kind of developer tools this was my favorite. i can change virtually the css f.e. and see directly whether it works or not.
on a test install with two fullscreen sliders i see that the first one gets the class: avia-builder-el-0 and the second one avia-builder-el-1
so try to do it this way:
@media only screen and (min-width: 768px) { #fullscreen_slider_0.avia-builder-el-0 { display: none; } } @media only screen and (max-width: 767px) { #fullscreen_slider_0.avia-builder-el-1 { display: none; } #fullscreen_slider_0.avia-builder-el-0 { display: block; } }So the thing is that you do devide those identical ids through a class that follows directly to that div.
Be carefull that there is no space between div and class because it belongs direct to that div.
- The topic ‘Hiding a fullscreen slider on desktop and mobile’ is closed to new replies.