Shopify themes, liquid, logos, and UX
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
@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
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
Then we need to look into the code base so that we can override the default css on the theme.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025