Looking for Slideshow CSS Help - Mobile vs Desktop

[jaimiesz]

Hi all, I am looking for some help with the slideshow section of shopify. So far I have asked ChatGPT (sometimes it works and sometimes it doesn't!) and we are both stuck on this one. 

Essentially I am looking for the following:

• Desktop - heading and subheading text to be white and background to be transparent 
• Mobile (anything smaller than a desktop) - heading and subheading text to be black and background to be white since it is no longer overlayed over the image.

Here is the suggestion Chat GPT has given me but it is not working in the custom CSS field of the Slideshow section. 

<style>
/* Default styles for all screens */
.slideshow__text.banner__box {
background: transparent;
color: #7c8c70; /* Default text color for all screens */
}

/* Styles for desktop (screen width is 768 pixels or more) */
@media only screen and (min-width: 768px) {
.slideshow__text.banner__box {
background: transparent !important; /* Ensure transparency on desktop */
color: white !important; /* Text color on desktop */
}
}
</style>

Hope you can help! My store is filispace.com and here is a photo of what it looks like now. Maybe this also has to do with my colour schemes for each one but I am a little lost.

[ThePrimeWeb]

Hey @jaimiesz,

Try this one and see

#MainContent .slideshow__text.banner__box {
    background-color: transparent !important;
    color: #fff !important;
}

#MainContent .slideshow__text.banner__box > h2 {
    color: #fff !important;
}

@media only screen and (max-width: 768px) {
    #MainContent .slideshow__text.banner__box {
        background-color: transparent !important;
        color: #000 !important;
    }
    
    #MainContent .slideshow__text.banner__box > h2 {
        color: #000 !important;
    }
}