Carousel image - transparent text box (Pipeline V6 Mobile)

[LucaColella1]

Hi everyone,

I have a question for Pipeline mobile only.

I need to add a transparent box to enclose the text in the carousel on my Home Page (www.beddybyes.co) - I would like it to look like the SHOP NOW button in the banner at the top of the page. How can I do this? Do I need a piece of coding? And will it need to be added to assets > theme.css?

Your help/input is greatly appreciated.

Kind regards

Luca

[dmwwebartisan]

@LucaColella1

My pleasure to help you.
Welcome to the Shopify community!
Please share your store URL!
I will check out the issue and provide the correct solution to you!

Thanks!

[LucaColella1]

Thanks

The URL is https://beddybyes.co or https://beddybyes-co-uk.myshopify.com

[Prezentech]

Hi There,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

I have attached the screenshot, did you want like that?

Thanks & Regards,
Prezen Tech

[dmwwebartisan]

@LucaColella1

Please add the following CSS code to your assets/theme.css bottom of the file.

@media only screen and (max-width: 767px){
.hero__content {
    max-width: 100%;
    background-color: rgb(138 150 157 / 5%) !important;
}
}

Thanks!

[LucaColella1]

This solution works thank you, however, I only need it for the carousel not for the banner:

Banner

Carousel

Is there a way to include specify that in the code?

Thank you and kind regards

[dmwwebartisan]

@LucaColella1

Please remove previously provided code and add this new code.

Please add the following CSS code to your assets/theme.css bottom of the file.

@media only screen and (max-width: 767px){
#shopify-section-template--15197918822568__165193837169879dac .hero__content {
    max-width: 100%;
    background-color: rgb(138 150 157 / 5%) !important;
}
}

Thanks!

[LucaColella1]

Thank you that’s perfect! Much appreciated