Solved

Help with Banner buttons dont show on mobile view

meto2303
Tourist
12 0 2

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

www.lifehack-gadgets.comimagebutton.pngimagebutton2.png

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1774 499 365

This is an accepted solution.

Hey @meto2303,

 

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.

ThePrimeWeb_0-1711212324199.jpeg

 

ThePrimeWeb_1-1711212343107.png

 

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

LuffyOnePiece
Shopify Partner
323 56 55

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:

LuffyOnePiece_0-1711211775135.png

 

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
Shopify Partner
1774 499 365

This is an accepted solution.

Hey @meto2303,

 

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.

ThePrimeWeb_0-1711212324199.jpeg

 

ThePrimeWeb_1-1711212343107.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website