Separate Slideshow Images for Mobile and Desktop - Dawn

[SNEATED]

However I now ran into a problem when I set up a slideshow, the images show on the desktop version, but don't appear on the mobile one. 

before that i followed these steps to use separate banner images.

https://community.shopify.com/c/shopify-design/separate-banner-images-on-mobile-and-desktop-dawn-the...

does anyone have a reasonable solution?

Thanks!

[Finer · Accepted solution]

@SNEATED it depends on what reasonable solution is 😅

The slideshow and the banner might be using the same CSS classes ("banner__media"). This would unintentionally cause the slideshow to behave like the banner. You could add a new class to the banner section and use it as a new selector for the banner customization.

E.G: In the banner section, you can add (append) a class "custom__media" and replace in the CSS code "banner__media" with "custom__media".

.custom__media:first-child {
    width: 100%;
}
.custom__media+.custom__media {
    display: none;
}
@media screen and (max-width: 749px) {
	.custom__media:first-child {
		display: none;
	}
	.custom__media+.custom__media {
		width: 100%;
		display: block !important;
	}
}

This would only apply to the banner section and not to the slideshow.

[SNEATED]

@Finer 

Unfortunately it does not work..
worded differently. How Can I use different mobile and desktop photos for banner and slideshow?

That I'm starting from scratch.

Thanks!