Background color text box on Image Banner: missing on mobile

Store Design
, ,
1

Hello,

I have a site in development on Dawn theme. All pages that have Image Banner sections: in Mobile, the color box background is missing. My issue is - the font isn’t readable over this image, it needs the background color box which natively displays great on desktop.

What it looks like on Desktop:

JessSalida_1-1692908712484.png
JessSalida_1-1692908712484.png2080×1798 463 KB

What it looks like on Mobile:

JessSalida_0-1692908578097.png
JessSalida_0-1692908578097.png798×1912 231 KB

Thank you all for your time and expertise.

1 Like
2

Hi @JessSalida

Would you mind to share your Store URL website? with password if its protected. Thanks!

3

Oh yes! Its:

https://soul-stitchery.myshopify.com/

pw:

marisol

Thanks!

1 Like
4

Thank you. Try this one.

  • 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 screen and (max-width: 749px)
.banner:not(.banner--mobile-bottom) .field__input, .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-background-1 {
    background: unset !important;
}
  • And Save.

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

5

Hi there, thanks so much for the quick suggestion. I added it to the bottom of base.css but it doesn’t seem to have an impact :disappointed_face:

1 Like
6

Hello, Im a bit confuse. The title of the banner you have in the mobile was not transparent. It was like this.

Ribe_Dagandara_0-1693080770911.png
Ribe_Dagandara_0-1693080770911.png482×486 167 KB

It not inside of the banner but outside. Not the same you have in the image.

7

Hi there. I am using Chrome and Safari on my Mac and I see it displaying like this on mobile view (I do have some extra CSS in the base.css file to make the headline text/subtext/button lay on top of the image on mobile view, as the native way was placing it below the image on mobile like your screen shot). Here is a screenshot what it looks like on mobile safari for me right now:

JessSalida_0-1693101924324.png
JessSalida_0-1693101924324.png1406×1662 349 KB

8

Hi again @Made4uo-Ribe I checked from my actual mobile device and I also see what you see. The copy is below the image banner, not on it :disappointed_face: so my desire is for the copy to remain positioned over the image banners on mobile and with white background behind the copy so its readable. Thank you!!