Dawn Theme: White Box Missing Behind Text on Mobile Home Page
I see that @KetanKumar has been helpful in the past, so hoping he or someone familiar with the Dawn theme is close at-hand. His solution from 2021 got my text moved onto the home page image in mobile as it does in desktop (https://community.shopify.com/c/shopify-design/image-banner-not-displaying-on-dawn-theme-mobile-view...) BUT the white text box has disappeared ... which renders the text unreadable.
I assume the fix is a .css mod to /section-image-banner.css but I'm no coding pro. Can anyone suggest a snippet to add to that would bring back the white box on mobile?
Below are screenshots of the desktop and mobile versions of www.monumentalgoods.com. Access password in 'lawngo' if anyone wants to see the prod version.
This is literally the last defect on my punch list before go-live, so any help is MUCH APPRECIATED!
This is correct on desktop:
And this is incorrect on mobile:
Hey @BellaRoad
You have alot of text and adding the white background back covers almost 90% of the video.
E.g.
I could do 2 things for you
1. Add a little transparency to the background
2. Change the text to white and add a little shadow to make it pop out more
I'll give you both the codes as Option 1 and 2, you can pick which one you want
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
Option 1 - Transparent white background
<style>
@media only screen and (max-width: 989px) {
.banner:not(.banner--mobile-bottom) .field__input, .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
background: rgba(255,255,255,0.7) !important;
}
}
</style>
Option 2 - White text with shadow
<style>
@media only screen and (max-width: 989px) {
.banner:not(.banner--mobile-bottom) .field__input, .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
color: white !important;
filter: drop-shadow(2px 2px 3px black) !important;
}
.banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 h2 {
color: white !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Hey @BellaRoad
You have alot of text and adding the white background back covers almost 90% of the video.
E.g.
I could do 2 things for you
1. Add a little transparency to the background
2. Change the text to white and add a little shadow to make it pop out more
I'll give you both the codes as Option 1 and 2, you can pick which one you want
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
Option 1 - Transparent white background
<style>
@media only screen and (max-width: 989px) {
.banner:not(.banner--mobile-bottom) .field__input, .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
background: rgba(255,255,255,0.7) !important;
}
}
</style>
Option 2 - White text with shadow
<style>
@media only screen and (max-width: 989px) {
.banner:not(.banner--mobile-bottom) .field__input, .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
color: white !important;
filter: drop-shadow(2px 2px 3px black) !important;
}
.banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 h2 {
color: white !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
It's the same code, it's restricted to mobile, you just need to remove the restriction
Just delete the circled parts. The opening media tag and the closing curly brace.
Thanks for the quick response!
That seems to have affected the text treatment but not removed the white container. Something else I need to mod?
You can use this code @BellaRoad,
<style>
.banner:not(.banner--mobile-bottom) .field__input, .banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 {
color: white !important;
filter: drop-shadow(2px 2px 3px black) !important;
background:transparent !important;
}
.banner--mobile-bottom:not(.banner--stacked) .banner__box.color-scheme-1 h2 {
color: white !important;
}
</style>
The only difference is:
Hey TPW: one more (probably) dumb question. I'm migrating to Dawn v14 and went to replicate these changes, but now it's stacking the banner and banner text in mobile as shown in the attached screenshot. Text treatment is fine, and I checked all the obvious places in Admin but maybe something 2% different in the new theme version? Thoughts?
I still see the live site, you should see the preview link share button at the bottom of the window.
Example:
Yeah I see some changes in the new update.
You have to add this additional code. Leave the code above as it is, don't remove anything.
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
@media only screen and (max-width: 989px) {
.banner__content.banner__content--bottom-right.page-width.scroll-trigger {
position: absolute !important;
}
}
Screenshot is for reference only, the correct code to paste is the one shown above.
Perfect, thanks! Is there a mod to the 'position' value that would set the text to the bottom of the image?
Hi TPW. It's time for my seemingly quarterly re-asked question about my mobile banner 🤣 Just swapped the image out, and I seem to have lost the overlay again. Went back a validated all your previous changes in my live code but alas the screenshot tells the truth. Any insights on code tweaks to fix?
Community Blog Articles
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024