Need help with text background highlight in Debut slideshow

[MoeG]

Hi,

I’m using the Debut theme. I need to add a semi transparent highlight behind the text in my homepage slideshow. I found the below code in a community post (here); it worked for my desktop site but it messed up my mobile version. Any suggestions to keep mobile unchanged?

. slideshow__title{
background: rgba(0, 0, 0, 0.5);
padding: 16px;
display: inline-table;
}

Also, is there a way I can use different images for my mobile and desktop sites?

thanks in advance.

[dmwwebartisan]

@MoeG

Please try the following code.

@media screen and (min-width: 750px){
. slideshow__title{
background: rgba(0, 0, 0, 0.5);
padding: 16px;
display: inline-table;
}
}

This will work for desktop only. As for the different images for desktop and mobile this will be a customization work.

[MoeG]

Thanks for the reply, @dmwwebartisan

I tried the code but it did not work. I copied it and pasted it in my theme.css file, saved the code then reloaded the website, but nothing happened.

[dmwwebartisan]

@MoeG

Please share your store URL.

[MoeG]

it’s www.lovemyhooman.com

[dmwwebartisan]

@MoeG

I can see you put the liquid comment in your css file. Please check the following screenshot.

[LitExtension]

Hi @MoeG ,

Please follow the steps:

• Step 1: Go to Online store > Themes > Actions > Edit code.

• Step 2: Go to Assets > theme.css and paste this at the bottom of the file:

@media only screen and (min-width: 750px) {
        .slideshow__text-wrap--desktop .slideshow__title{
                background: rgba(0, 0, 0, 0.5);
                padding: 16px;
                display: inline-table;
        }
}

• With images for mobile, you need to create a Slideshow that displays only for mobile. Means add an option, it will help you to display either on desktop, or on mobile.

Go to file sections > slideshow.liquid and add code: https://i.imgur.com/BnHNZkH.png

Code: class=“{{ section.settings.display }}”

And add code here: https://i.imgur.com/IsDiahX.png

{
  "type": "select",
  "id": "display",
  "label": "Display on",
  "options": [
        {
          "value": "",
          "label": "Desktop & Mobile"
        },
        {
          "value": "small--hide medium-up--show",
          "label": "Desktop only"
        },
        {
          "value": "small--show medium-up--hide",
          "label": "Mobile only"
        }
  ],
  "default": ""
},

Then you can show it with customize option: https://i.imgur.com/y3mcFmM.png

Hope this helps.

Please mark as a solution if you find my answer helpful for you. Thank you and goodluck!

[MoeG]

@dmwwebartisan

Yes the code now works for Desktop without affecting mobile! thank you very much. Do you know how I can add the same for the subheading text? (see screenshot below)

[MoeG]

@LitExtension this is super! the second solution works excellent to show different slideshow groups for mobile and desktop! I could not thank you enough!

Regarding text highlight, the code works but for the main heading, how can I make it work for the subheading too? (Screenshot below)

[LitExtension]

Please change the code as below:

@media only screen and (min-width: 750px) {
.slideshow__text-wrap--desktop .slideshow__text-content-list{
background: rgba(0, 0, 0, 0.5);
padding: 16px;
display: inline-table;
}
}

[MoeG]

@LitExtension Thank you so much for all your help. The code now works! I could not be thankful enough!