How can I add a solid white box behind text on mobile?

[faytheworks]

How can I add a solid white box behind text on mobile like it displays on desktop in Studio theme? Working on new site: store.reneeallenmccoy.com

[Moeed · Accepted solution]

Hey @faytheworks 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.slideshow__text.banner__box {
    background: white !important;
    margin: 50px;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[faytheworks]

Thank you! It worked perfectly❤️

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Tech_Coding]

Hello @faytheworks 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
   .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
       background: #fff !important;

       max-width: 27.5rem !important;
   }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.