FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

Separate Slideshow Images for Mobile and Desktop - Dawn

Gelöst

Separate Slideshow Images for Mobile and Desktop - Dawn

SNEATED
Tourist
3 0 0

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!

1 AKZEPTIERTE LÖSUNG

Finer
Shopify Partner
2632 555 920

Erfolg.

@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.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency

Lösung in ursprünglichem Beitrag anzeigen

2 ANTWORTEN 2

Finer
Shopify Partner
2632 555 920

Erfolg.

@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.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
SNEATED
Tourist
3 0 0

@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!