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

DorfkindKaffee
Visitor
2 0 0

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.

 

desktop.png

 

mobile.png

 

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:

attempted solution.png


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

mobile android.png


Can anyone help me out with this?

www.dorfkindkaffee.de
password: doofkind



Replies 3 (3)

LuffyOnePiece
Shopify Partner
299 53 51

@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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
DorfkindKaffee
Visitor
2 0 0

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
Shopify Partner
299 53 51

@DorfkindKaffee 

 

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

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184