Change colour background on slideshow mobile

Topic summary

A user is experiencing a slideshow background color issue on mobile devices. While the desktop preview in Shopify displays correctly with different background colors for each slide, the mobile version only shows one color (from the second slide) across all slides.

Technical Details:

  • Custom CSS has been added to component-slideshow.css with a media query for screens under 780px
  • The code targets individual slide IDs and applies different background colors using !important flags
  • Screenshots were provided showing the discrepancy between expected and actual mobile display

Current Status:
The issue remains unresolved with no responses yet. The CSS code appears partially corrupted or improperly formatted in the post, which may be contributing to the problem.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.

Hi,

Would anybody know how to change the background colour on each different slideshow on mobile. When I preview it on Shopify, it’s perfect but when I double-check online, the mobile version only keeps one colour assigned to the second slide on all of them. View screenshot below to understand.

Here is the code used in component-slideshow.css

@media screen and (max-width: 780px) {

#Slide-template–22119597539636__slideshow_cRCGCG-1{
.banner__content{

background-color: #F3EAE0 !important;
}
}

#Slide-template–22119597539636__slideshow_cRCGCG-2{
.banner__content{

background-color: #FEF9ED !important;
}}
#Slide-template–22119597539636__slideshow_cRCGCG-3{
.banner__content{

background-color: #FCD9D9 !important;
}}