Solved

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

meganmichelle
New Member
5 0 0

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!

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1756 492 358

This is an accepted solution.

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.

ThePrimeWeb_0-1708707425767.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 4 (4)

ThePrimeWeb
Shopify Partner
1756 492 358

This is an accepted solution.

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.

ThePrimeWeb_0-1708707425767.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
meganmichelle
New Member
5 0 0

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
Shopify Partner
1756 492 358

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
meganmichelle
New Member
5 0 0

AMAZING! It worked! Thank you SO much!