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

Store Design

Topic summary

A user needed help adding a solid white background box behind text on mobile devices for their Shopify store using the Studio theme, as it already displayed correctly on desktop.

Solution provided:

  • Navigate to Online Store → Theme → Edit Code
  • Open the theme.liquid file
  • Insert CSS code before the </body> tag targeting mobile screens (max-width: 767px)
  • The code applies a white background (#fff) with specific max-width styling to .banner__box elements

Outcome:
The solution was successfully implemented and confirmed working by the original poster, who marked it as the accepted answer.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
2

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 tag

RESULT:

Moeed_0-1726905088335.png
Moeed_0-1726905088335.png381×674 93.7 KB

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

Best Regards,
Moeed

1 Like