---
title: "Separate Sliders for Mobile and Desktop Ascend"
source: "https://docs.nexcess.com/software/kadence/separate-sliders-for-mobile-and-desktop-ascend/"
description: "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…"
vertical: "Software"
area: "Kadence"
date: "2021-08-03"
last_modified: "2021-08-03"
---

# 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 needs 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;
}
}
```