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 the slider's CSS field, or to your theme's CSS file or use a plugin like Simple Custom CSS and JS.
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 screens wider than 441px and the #5 slider will be displayed on 440px screens and below.
☝️ Note: The example code above only applies to the screen width. You will need to do custom coding if you want to fine-tune the Media Queries to detect landscape and portrait screen sizes. Please note that we're not able to provide any kind of support for custom coding.
You can put this code to the slider's CSS field, or to your theme's CSS file or use a plugin like Simple Custom CSS and JS.