How to show 2 different Slideshow (One on mobile, and one on Desktop)

[SellingWithAlex]

Hello for https://themes.shopify.com/themes/split/styles/cuber/preview in the Slideshow I have made two slideshows. One that should be displayed for Mobile users, and one for Desktop users.

1. What code can I enter in Custom CSS on Desktop Slideshow to display it on Desktop, but not on Mobile.

2. And what Custom CSS code can I put Mobile Slideshow, so that it'll display only when viewed on mobile, but not on desktop?

Thank you everyone 🙂  

[Sonya_2025]

Hey @SellingWithAlex 

pls refer to image Banners for Every Device

Hope this helps.

[SellingWithAlex]

Hi Sonya,

Is Image Banner and Slideshow the same thing?

[vm-web]

@SellingWithAlex 

No, the image banner shows only image

[Sonya_2025]

No. they are not same. but I think you can achieve your needs by the same way

[SellingWithAlex]

Okay, thank you for this I guess?

My question was about the Slideshow

[Sonya_2025]

Hi @SellingWithAlex 

Add two slideshow sections in your theme editor. one for mobile, one for desktop. and then using css to hide one of them.

the implement logic is the same as mentioned in the blog I shared. You can have a try:)

[namphan]

Hi @SellingWithAlex,

- For desktop: Please add code:

@media screen and (max-width: 768px) {
  .site-box-container {
    display: none !important;
  }
}

- For mobile: Please add code:

@media screen and (min-width: 769px) {
  .site-box-container {
    display: none !important;
  }
}

[Dan-From-Ryviu]

Hi @SellingWithAlex 

Please create 2 Slideshow sections from your theme customization, then add CSS code below for each section.

Add this code to the Custom CSS of the desktop section.

@media (max-with:749px) {
.css-slider-viewport { display: none; }
}

Add this code to the Custom CSS of the mobile section.

@media (min-with:750px) {
.css-slider-viewport { display: none; }
}