How to Display Different Images for Desktop and Mobile in a Shopify Slideshow venue theme

[Dualswan]

Issue with Image Display in Slideshow (VENUE theme)

Recently, I encountered an issue while trying to display different images in my Shopify slideshow depending on the device used (desktop or mobile). I followed some instructions found in Shopify discussions and implemented a CSS code that was supposed to hide or show certain images based on screen size. However, this solution did not work as expected. Additionally, I tried to resolve the issue using the section-image-slideshow by creating two separate slideshow sections for desktop and mobile, hiding them through CSS depending on screen size. Unfortunately, this solution also didn't yield the desired results. I am seeking further suggestions to fix the problem and ensure the correct display of images.

[Dan-From-Ryviu]

Hi @Dualswan 

Please create 2 slider sections and add code following this 

Add code to Custom CSS of desktop section 

@media (max-width: 767px) {
.home-carousel-wrapper { display: none; }
}

And this code for mobile section 

@media (min-width: 768px) {
.home-carousel-wrapper { display: none; }
}

If it is still not working, please send me your store URL so I can get the correct element of the class of your slider sections to provide code that works. 

[Dualswan]

Hi, thanks for the help, it worked, but there's still a small problem: a space has been created in both the mobile and desktop versions.

[Sonya_2025]

Hey @Dualswan 

I believe this video about how to show different images for slideshow on Shopify is helpful