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

Store Design
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
Cyrus_Neutrovis_0-1712907716304.png855×718 338 KB

Mobile (removed the CSS code):

Cyrus_Neutrovis_2-1712907831256.png
Cyrus_Neutrovis_2-1712907831256.png1131×946 169 KB

2

Add this css in your base.css File

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

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

4

Add This css Code Un Your Base.css File

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