Solved

Dawn Theme: White Box Missing Behind Text on Mobile Home Page

MonumentalGoods
Visitor
2 0 0

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:

Monumental_Goods.png


And this is incorrect on mobile:

Notification_Center.png

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1729 481 354

This is an accepted solution.

Hey @MonumentalGoods

 

You have alot of text and adding the white background back covers almost 90% of the video.

 

E.g.

ThePrimeWeb_0-1710949047637.png

 

 

I could do 2 things for you

 

1. Add a little transparency to the background

ThePrimeWeb_1-1710949073407.png

 

2. Change the text to white and add a little shadow to make it pop out more

ThePrimeWeb_3-1710949163719.png

 

 

 

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.

ThePrimeWeb_0-1710949253331.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 3 (3)

ThePrimeWeb
Shopify Partner
1729 481 354

This is an accepted solution.

Hey @MonumentalGoods

 

You have alot of text and adding the white background back covers almost 90% of the video.

 

E.g.

ThePrimeWeb_0-1710949047637.png

 

 

I could do 2 things for you

 

1. Add a little transparency to the background

ThePrimeWeb_1-1710949073407.png

 

2. Change the text to white and add a little shadow to make it pop out more

ThePrimeWeb_3-1710949163719.png

 

 

 

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.

ThePrimeWeb_0-1710949253331.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
MonumentalGoods
Visitor
2 0 0

The white text with the drop shadow looks awesome. Thanks so much!

ThePrimeWeb
Shopify Partner
1729 481 354

No worries, have a successful launch!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website