Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 15, 2021 at 10:48 pm #1310330
    Sachifus

    Hello,

    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!

    July 17, 2021 at 5:32 am #1310474
    Rikard

    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,
    Rikard

    July 17, 2021 at 2:39 pm #1310492
    Sachifus

    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.

    Regards

    July 17, 2021 at 4:45 pm #1310506
    Jordan Shannon

    Hi,

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

    https://blog.hubspot.com/website/how-to-inspect

    Best regards,
    Jordan Shannon

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