How to modify Studio Theme Mobile version to add solid box behind Text

Hello, I am using the (Studio) Theme.
I have having trouble with the Slide text View on Mobile version.
The text is not visible with the photo background. I need to edit the code with a solid box color like the Browser version. I would like to copy the Browser version with the text and Solid box behind the text so it is visible to read.

Password Protected.

Eleven:11

Hi,

Can you send us your website so we can help you?

Terence

Yes,

www.Eleven11soapco.com

password

Eleven:11

I hope I haven’t misunderstood. The following code will do what you want. you encounter any issues again, feel free to write, I’ll help.

Navigate to the ‘Edit Code’ option in your theme settings, then search for “base.css” in the search bar and add below codes

@media (max-width: 749px){

#Slide-template–22542034862392__slideshow-2 .slideshow__text {

background-color: #f0f0f0;

}

}

Terence..

Thank you! That was exactly what I was looking for. Is it possible to make
the solid box and text smaller so I can still have the background photo
show like the Browser version?

With the right person and the right code, anything is possible :wink: Let me give you a small gift!

Could you please add the following codes?

note: you can delete the code I sent before

@media (max-width: 749px){

#Slide-template–22542034862392__slideshow-2 .slideshow__text {

background-color: transparent!important;

padding: 60px;

position: relative;

z-index: 1;

}

#Slide-template–22542034862392__slideshow-2 .slideshow__text::before {

position: absolute;

width: 80%;

height: 80%;

background: #f0f0f0 !important;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

content: “”;

z-index: -1;

border: 3px solid #e7e0e0;

}

}

Is there a way to make the Text smaller and solid box behind it. Allowing
us to see the background picture a little more. Hoping to have the same
view as the Browser. In the browser, you are able to see the
eucalyptus plant a lot more as well as the positioned wordings and box.

Sure!

Actually, there’s a lot of text in this area. You can change the font size with the following codes. Let me know if you can’t do it

@media (max-width: 749px){

.slideshow__text > .banner__heading {
    font-size: 19px;
}

.slideshow__text > .banner__text > p {
    font-size: 13px !important;
}

}