FROM CACHE - de_header

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
2128 462 764

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
2128 462 764

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!