How to hide the slider on mobile?

In this documentation

Hide the slider on mobile

Pro version

You can hide the slider for mobile devices at the Slider settings → Size tab using the Hide on feature.

Free version

In the free version, you can hide the slider with custom coding using Media Queries:

E.g.:

@media only screen and (max-width: 440px) {
    div#n2-ss-4, div#n2-ss-4-placeholder {
        display: none;
    }
}

where the 4 in n2-ss-4 is your slider id. You can put this code to your theme's CSS file.

Show different slider for mobile and desktop

Pro version

You should hide one of your sliders on mobile, and the other one on desktop and tablet. Then publish the two sliders below each other.

You can hide the slider at the Slider settings → Size tab using the Hide on feature.

Free version

Publish the two sliders below each other and use media Media Queries to show or hide the slider on different browser widths.
div#n2-ss-4 {
  display: block;
}
div#n2-ss-5, div#n2-ss-5-placeholder {
  display: none;
}

@media only screen and (max-width: 440px) {
  div#n2-ss-4, div#n2-ss-4-placeholder {
    display: none;
  }
  div#n2-ss-5 {
    display: block;
  }
}

where the 4 in n2-ss-4 and 5 in n2-ss-5 is your slider id. The code above will make the #4 slider show up on desktop and the #5 slider on mobile.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.