Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #1310330


    I want to make two different sliders depending on if I’m visiting the page on a mobile device or a desktop device.

    So I put the two layerSliders one above each other on the page (homepage) so that only the correct one shows up.

    For the desktop one, I checked the box “hide on mobile” in the slider settings.

    However, I can’t manage to hide the other one on desktop so that it only shows up on mobile. I tried adding this CSS code into the custom slider CSS section :

    @media screen and (min-width: 500px) {
    display: none !important;

    It doesn’t work. If I remove the first line and only put display:none !important;, then it works but it removes it both for desktop and mobile, which is obviously not want I want to do. It seems like the min-width CSS property doesn’t work properly.

    Do you have any idea? Thanks!


    Hey Sachifus,

    Please try this in Quick CSS in order to hide the second slider for tablet/desktop screens:

    @media only screen and (min-width: 768px) {
    #layer_slider_2 {
      display: none;

    Best regards,


    Hello Rikard,

    Thank you. It worked perfectly. Could you just tell me where did you find the id layer_slider_2 ?

    So I can do it myself in the future.




    You can use the element inspector. Please refer to the following on how to do so on the most popular browsers:


    Best regards,
    Jordan Shannon

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.