Can you add a background to the text container on an image banner on Mobile? Sense theme

Store Design
, ,

Topic summary

A Shopify store owner using the Sense theme wants to add a background to text on an image banner for mobile view without stacking the elements. They already have custom CSS for letter spacing and sizing.

Proposed Solutions:

  • Beae_Cass (Anthony) suggests using the Beae Landing Page Builder and provides instructions to:

    • Navigate to Online Store → Theme → Edit code
    • Open the theme.liquid file
    • Paste specific markup code before the closing body tag
    • Customize colors to match the store

  • Made4uo-Ribe offers a CSS-based solution:

    • Access the theme’s CSS file (base.css, style.css, or theme.css)
    • Add media query code targeting mobile screens (max-width: 749px)
    • Apply white background and border-radius to banner elements
    • Excludes email signup banners from styling

Status: The discussion remains open with two different approaches provided—one using a page builder tool and another using custom CSS modifications.

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

I am wanting to keep my text on the image banner on mobile, but I would like to add the background to it, without stacking. I do have a custom CSS for just this section that related to letters and size.

I am using Sense theme.

Custom CSS that is input already.

.caption-with-letter-spacing {
font-size: 1.5rem;
letter-spacing: 0.13rem;
line-height: calc(1 + 0.2 / var(–font-body-scale));
text-transform: uppercase;
}
.banner__box {
max-width: 400px;
}

www.taleology.com

Screenshot 2023-08-21 at 11.51 1.jpg
Screenshot 2023-08-21 at 11.51 1.jpg486×596 37.6 KB

1 Like
2

Hi @Emma53 ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Note: You can change color to fit your store

Beae_Anthony_0-1692633961121.png
Beae_Anthony_0-1692633961121.png479×565 82.3 KB

Best regards,

Anthony

1 Like
3

Hi @Emma53

Do you mean same with your desktop? If it is try this.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    background: white !important;
    border-radius: 24px;
}
}

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like