Need help with making image banner clickable with CSS code (mobile site not working correctly)

Need help with making image banner clickable with CSS code (mobile site not working correctly)

Cyrus_Neutrovis
Tourist
5 0 1

I've look through multiple topics for this and managed to find one solution that works for me here: Solved: I Need Help Making The Homepage Image Of Image Banner Clickable - Shopify Community

 

But I'm having some issues with my shop: https://shop.neumore.com/products/laundry-pods-multipack (passwrd: poddies) where the css code works for my desktop banner but on mobile that same CSS code just made my image banner disappear.

 

The css code:

.banner__content,
.banner__box,
.banner__buttons,
.banner__buttons .button {
height: 100% !important;
width: 100% !important;
max-width: 100% !important;
padding: 0px !important;
opacity: 0 !important;
position: absolute;
left: 0;
right: 0;
}

 

Desktop:

Cyrus_Neutrovis_0-1712907716304.png

 

Mobile (removed the CSS code):

Cyrus_Neutrovis_2-1712907831256.png

 

 

Replies 3 (3)

Raj-WebDesigne
Shopify Partner
60 16 14

Add this css in your base.css File

#Banner-template--17686097789153__image_banner_qUabnP {
    display: block !important;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com


Cyrus_Neutrovis
Tourist
5 0 1

Hi @Raj-WebDesigne thanks but my mobile banner is on this section id: shopify-section-template--17686097789153__image_banner_hBwjhr

 

Using your suggested code only made the desktop banner appear on mobile

Raj-WebDesigne
Shopify Partner
60 16 14

Add This css Code Un Your Base.css File

.banner.banner--content-align-left.banner--content-align-mobile-center {
    display: block !important;
}

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:- Contribution

Contect On My Mail :-Mail@gmail.com