Help with Banner buttons dont show on mobile view

meto2303 · ‎03-23-2024

Hello i need help with banner buttons. They are good on desktop view but wont show on mobile view.

ThePrimeWeb · ‎03-23-2024

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-scheme-1.gradient {
        display: block !important;
    }
    
    h2.banner__heading.inline-richtext.h1,
    .banner__buttons.banner__buttons--multiple a {
        color: white !important;
    }
    
    .banner__content.banner__content--middle-center.page-width {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-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!

View solution in original post

LuffyOnePiece · ‎03-23-2024

HI @meto2303 ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

@media(max-width:767px){
.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient {
    display: block !important;
}

h2.banner__heading.inline-richtext.h1 {
    color: rgb(var(--color-foreground)) !important;
}

.banner__buttons.banner__buttons--multiple a {
    color: rgb(var(--color-foreground)) !important;
}
}

Result:

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
LuffyOnePiece

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

ThePrimeWeb · ‎03-23-2024

Hey @meto2303,