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/post/1426911) 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
- Add a little transparency to the background
- 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 “” tag paste the following. Screenshot attached for reference.
Option 1 - Transparent white background
Option 2 - White text with shadow
Screenshot is for reference only, the correct code to paste is the one shown above.
The white text with the drop shadow looks awesome. Thanks so much!
No worries, have a successful launch!
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!
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?
New domain is bellaroad.com and the lock PW remains ‘lawngo’.
You can use this code @BellaRoad ,
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?
Hey @BellaRoad ,
Have you published this theme? Or can you share the preview link for the draft theme for me to check?
I think this preview link should work for you: https://bellaroad.com/?_ab=0&_fd=0&_sc=1
Thanks!
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 “” 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?
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;
}
}
Perfect, thanks! A latte is in your queue…
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?
