Looking for Slideshow CSS Help - Mobile vs Desktop

jaimiesz
Visitor
3 0 1

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.Screenshot 2024-01-18 at 4.14.08 PM.png

Reply 1 (1)

ThePrimeWeb
Shopify Partner
1049 271 213

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;
    }
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here