Mobile Layout Header Box

metoyoubox · ‎04-09-2024

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

Header box has transparent background with dark text:

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

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!

ThePrimeWeb · ‎04-12-2024

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

ThePrimeWeb · ‎04-09-2024

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.

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 · ‎04-12-2024

Thank you so so much,

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

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

ThePrimeWeb · ‎04-12-2024

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 · ‎04-09-2024

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>

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!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

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

Mobile Layout Header Box