Solved

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

MonumentalGoods
New Member
10 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
2077 596 467

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
Check out our interview with Shopify!

View solution in original post

Replies 18 (18)

ThePrimeWeb
Shopify Partner
2077 596 467

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
Check out our interview with Shopify!
MonumentalGoods
New Member
10 0 0

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

ThePrimeWeb
Shopify Partner
2077 596 467

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
Check out our interview with Shopify!
MonumentalGoods
New Member
10 0 0

Hi TPW! I'm in the process of changing my brand and wanted to migrate the modification you outlined above to my desktop version of the site as well. Can I assume the same code works, but it needs to be dropped into a different .liquid file? Could you point me to the correct one? Thanks!

ThePrimeWeb
Shopify Partner
2077 596 467

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.

ThePrimeWeb_0-1713895749774.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
MonumentalGoods
New Member
10 0 0

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?

Bella_Road.png

MonumentalGoods
New Member
10 0 0

New domain is bellaroad.com and the lock PW remains 'lawngo'.

ThePrimeWeb
Shopify Partner
2077 596 467

You can use this code @MonumentalGoods,

<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:

ThePrimeWeb_0-1713917319193.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
MonumentalGoods
New Member
10 0 0

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?

Bella_Road__Her_Way_Forward.jpg

ThePrimeWeb
Shopify Partner
2077 596 467

Hey @MonumentalGoods,

 

Have you published this theme? Or can you share the preview link for the draft theme for me to check?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
MonumentalGoods
New Member
10 0 0

I think this preview link should work for you: https://bellaroad.com/?_ab=0&_fd=0&_sc=1

 

Thanks!

ThePrimeWeb
Shopify Partner
2077 596 467

I still see the live site, you should see the preview link share button at the bottom of the window. 

ThePrimeWeb_0-1715055189827.png

 

Example:

ThePrimeWeb_1-1715055253138.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
MonumentalGoods
New Member
10 0 0
ThePrimeWeb
Shopify Partner
2077 596 467

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.

ThePrimeWeb_0-1715087414065.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
MonumentalGoods
New Member
10 0 0

Perfect, thanks! Is there a mod to the 'position' value that would set the text to the bottom of the image?

 

Bella_Road__Her_Way_Forward.png

ThePrimeWeb
Shopify Partner
2077 596 467

Yeah sure, 

 

just add "bottom: 0 !important;" to the same code like this

@media only screen and (max-width: 989px) {
    .banner__content.banner__content--bottom-right.page-width.scroll-trigger {
        position: absolute !important;
        bottom: 0 !important;
    }    
}

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
MonumentalGoods
New Member
10 0 0

Perfect, thanks! A latte is in your queue...

ThePrimeWeb
Shopify Partner
2077 596 467

Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!