Mobile header transparent and hard to read, desktop has white box

meganmichelle · ‎02-23-2024

Hello!

On my desktop, using the theme 'studio', I have a slideshow at the top. On 2 of the rotations I have Text boxes and they have a white background on the desktop site- which is great because I can read the font.

But when I go mobile, there is no text box and the font gets lost on the background. I would like there to be a white box, or transparent white box there so it is readable. Please help!

www.meganmichelleart.com

thank you!

ThePrimeWeb · ‎02-23-2024

Hey @meganmichelle,

That's some pretty cool art, you're a great artist!

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.

<style>
@media only screen and (max-width: 749px) {
    .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box:has(h2) {
        background-color: white !important;
        margin: 60px !important;
        padding: 30px 10px !important;
    }    
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

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

ThePrimeWeb · ‎02-23-2024

Hey @meganmichelle,

That's some pretty cool art, you're a great artist!

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.

<style>
@media only screen and (max-width: 749px) {
    .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box:has(h2) {
        background-color: white !important;
        margin: 60px !important;
        padding: 30px 10px !important;
    }    
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

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!

meganmichelle · ‎02-23-2024

Thank you! Do it cut and paste it on line 4 like you have on the screenshot? I don't want to mess it up 🙂

ThePrimeWeb · ‎02-23-2024

Yes. If line 3 has the word '<head>', then you add it in line 4.

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!

meganmichelle · ‎02-23-2024

AMAZING! It worked! Thank you SO much!

Mobile header transparent and hard to read, desktop has white box