How can I add a text container to my mobile site's image banner?

Store Design

Topic summary

A user working with Shopify’s Craft theme needed to add a text container to their mobile image banner for better readability. While the theme includes a “Show container on desktop” option, no equivalent mobile setting existed.

Solution provided:

  • Custom CSS code added to the theme’s base.css file
  • Uses a media query targeting screens under 749px width
  • Applies background color to the banner box element
  • Initial code successfully added the container

Refinements made:

  • Padding adjustment (1rem) to reduce container size and show more of the background image
  • User successfully customized width to their preference

Current status:
Resolved for the original poster. A follow-up user implemented the same solution but seeks further customization—wanting an even smaller container that wraps only the text itself rather than a full block, to maximize photo visibility.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello!

I use the Craft theme and on my image banner for mobile, I would like to add a container so that people may read the text better. On the desktop version there is a “Show container on desktop” option but I’m not sure how to do it so when people look at the site on their mobile phones, it has the container also.

Photo of the website below so you can see.

The site is currently password protected.

www.shophouseofhunter.com

helloHOH is the password

Thank you!

IMG_2297.jpg
IMG_2297.jpg1284×2392 329 KB

2

@houseofhunter

Add this code at the bottom of Theme > Edit Code > assets > base.css file

@media screen and (max-width: 749px) {
	.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
       background-color: rgb(var(--color-background)) !important;
  }
}

let try it and let me know

2 Likes
3

It worked! But is there any way to make it smaller so that you can still see some of the photo?

4

And THANK YOU!

5

@houseofhunter

Replace the previouse code by this

@media screen and (max-width: 749px) {
	.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
       background-color: rgb(var(--color-background)) !important;
       padding: 1rem !important;
  }
}
2 Likes
6

Thank you! I was able to adjust the width and I think it looks good.

Thanks again for your help!

1 Like
7

@houseofhunter you are welcome

8

Hiya,

I used this code as well and it worked great but i was wondering if there was a way to make it even smaller, just so only the actual writing is in a container, not a whole block.

I have a attached a photo and drew a line around the section i want in a container, just so you can see more of the photo, i have tried different photos as well but they all get covered by the pink container bit.

Im new to Shopify so not sure if it is possible,

thank you