How do I add white text box over or below the slideshow photos on phone

Store Design
, , , , , , , , , , , , ,

Topic summary

A user encountered an issue where slideshow text appeared directly over images on mobile devices, making it difficult to read. They wanted to either add a white background box behind the text or reposition it below the image.

Initial Diagnosis:

  • Another user confirmed the issue appeared in Safari browser
  • The banner background existed but was set to transparent

Solution Provided:
A detailed CSS fix was shared involving:

  • Editing the base.css file via the theme code editor
  • Locating the .content-container--full-width-mobile:after class
  • Changing display: none to background-color: white
  • Optionally adjusting max-width to reduce the white background space on mobile
  • Alternatively, adding the white background through Custom CSS in the slider section settings

Outcome:
The user confirmed the solution worked successfully. The issue was specific to certain pages (Front of House page) rather than the homepage.

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

For some reason, the mobile version of the slide show is showing the text over the image. How can I either add a white text box around it or move it below the image?

Desktop view
Desktop view2880Ă—1800 530 KB

Mobile view
Mobile view585Ă—1266 97.8 KB

1 Like
2

Hi @lukafernada

You are using safari browser? This is on my end.

Made4uoRibe_0-1726692302620.png
Made4uoRibe_0-1726692302620.png535Ă—779 312 KB

3

Hello,

Your banner background is actually there but being set to transparent.

You’ll want to make a copy of your theme first and foremost. Then you will want to remove the style class properties that is controlling this section.

  • click on the 3 dots next the the customize button in your dashboard and click edit code

-next at the top you will see a file filter. Type base and then the base.css should show up

-next click anywhere on the page where there is code and then click CRTL + F to pop up the search (command F on mac)

-Search for

.content-container–full-width-mobile:after

You should see this code:

.content-container--full-width-mobile:after {
display: none;
  }

Erase the display: none and leave it like this:

.content-container--full-width-mobile:after {

  }

-Click save

-Next go and click customize

-Go to the section that this slider is located

-Click the slider

-Scroll down in the menu to Custom CSS

Put in this code:

.content-container {
  background-color: white;
}

If you do not like the space that this background takes up on mobile you can reduce the size by adding a max-width like this:

.content-container {
  background-color: white;
  max-width: 250px
}
4

yes thats right im on safari - it doesn’t do it on the home page - it does it on the Front of House page

5

it worked thank you!

1 Like