DAWN - How to add white background for text on mobile banner?

[DorfkindKaffee]

Hey everyone,

I want to add a white background for the text on my store banner on mobile, so that it looks more like the desktop version.

 

i found some other posts that seemed to have a solution but in the end it only worked for the mobile preview in the theme editor

This was the suggested code:

@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: 0.5rem !important;
}

the result looks just like what I had in mind:

 
But unfortunately it doesn't work when I open the website on iphone or android...

 
Can anyone help me out with this?

www.dorfkindkaffee.de
password: doofkind

[LuffyOnePiece]

@DorfkindKaffee 

Can you please try adding the below CSS?

@media screen and (max-width: 749px){
    body.gradient .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
        background: #fff !important;
        padding: 10px !important;
    }
}

Thank you

[DorfkindKaffee]

This unfortunately also doesn't work on mobile.

Like the other code, it works on the desktop preview for mobile, but not on an actual phone...
neither ios or android

[LuffyOnePiece]

@DorfkindKaffee 

Then we need to look into the code base so that we can override the default css on the theme.