1. Knowledge Base
  2. Ascend Theme
  3. Ascend CSS Snippets
  4. Separate Sliders for Mobile and Desktop Ascend

Instead of just adding this in the shortcode box:

[kadence_slider_pro id="2"]

 

You can add like this:

<div class="my-desktop-slider">[kadence_slider_pro id="2"]</div>
<div class="my-mobile-slider">[kadence_slider_pro id="3"]</div>

 
This is assuming id=”3″ is the mobile for 2 you would just change that to whatever it need to be.
 
Then you would add this css in your theme options custom css:

.my-mobile-slider {
display:none;
}
@media (max-width: 768px) {
.my-desktop-slider {
display:none;
}
.my-mobile-slider {
display:block;
}
}

 

For any other pages you follow the same thing just don’t have to add the css again.

Was this article helpful?

Related Articles