Solved

Mobile Layout Header Box

metoyoubox
New Member
4 0 0

Hi, I'm trying to get mobile layout to look similar to my desktop. 

 

Header box has transparent background with dark text:

Screenshot 2024-04-09 at 11.17.11 AM.png

 

But when trying to get the same on mobile, when I overlay, the text turns white and box disappears. 

Screenshot 2024-04-09 at 11.18.55 AM.png

 

Site is https://metoyoubox.com/pages/birthday

But right now I have it so the text doesn't overlay for the time being. 

 

Appreciate of any help you can lend! 

 

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2122 606 470

This is an accepted solution.

Hey @metoyoubox,

 

Use the same instructions and paste the code below.

 

20px is the title, 12px is the description, you can change it if you want to.

<style>
@media only screen and (max-width: 989px) {
    .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
        padding: 5px 15px !important;
        margin: 0 3rem !important;;
    }
    
    .banner__content.banner__content--middle-center.page-width {
        position: absolute !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        left: 50% !important;;
    }

    .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient .banner__heading {
        font-size: 20px;
    }
    
    .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient .banner__text {
        font-size: 12px;
    }
}
</style>

 

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 4 (4)

ThePrimeWeb
Shopify Partner
2122 606 470

Hey @metoyoubox,

 

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: 989px) {
    .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
        padding: 5px 15px !important;
        margin: 0 3rem !important;;
    }
    
    .banner__content.banner__content--middle-center.page-width {
        position: absolute !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        left: 50% !important;;
    }
}
</style>

 

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

ThePrimeWeb_0-1712697089204.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!
metoyoubox
New Member
4 0 0

Thank you so so much, 

Is it possible to decrease the size of the font on mobile? 

Screenshot 2024-04-12 at 6.37.13 PM.png

This is what's happening. I really appreciate your time. 

 

 

ThePrimeWeb
Shopify Partner
2122 606 470

This is an accepted solution.

Hey @metoyoubox,

 

Use the same instructions and paste the code below.

 

20px is the title, 12px is the description, you can change it if you want to.

<style>
@media only screen and (max-width: 989px) {
    .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient {
        padding: 5px 15px !important;
        margin: 0 3rem !important;;
    }
    
    .banner__content.banner__content--middle-center.page-width {
        position: absolute !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        left: 50% !important;;
    }

    .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient .banner__heading {
        font-size: 20px;
    }
    
    .banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient .banner__text {
        font-size: 12px;
    }
}
</style>

 

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!

PageFly-Richard
Shopify Partner
4287 973 1627

 

Hi @metoyoubox 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

 

 

<style>
@media (max-width: 767px) {
.banner__content {
position: absolute;
    height: 100%
}
}
</style>

 

PageFlyRichard_0-1712711831680.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.