Add This css Code Un Your Base.css File
.banner.banner--content-align-left.banner--content-align-mobile-center {
display: block !important;
}
Topic summary
Issue: CSS used to make a banner image fully clickable works on desktop but causes the image banner to disappear on mobile. The CSS targets .banner__content, .banner__box, .banner__buttons, and .banner__buttons .button with height/width 100%, opacity: 0, and position: absolute.
Context: Store link and password provided for testing. Screenshots show desktop working and mobile layout when the CSS is removed. The goal is a clickable banner that also renders correctly on mobile.
Proposed fixes:
- Suggestion 1: Force display on a specific banner ID via base.css: #Banner-template–176860 97789153__image_banner_qUabnP { display: block !important; }.
- OP response: Mobile uses a different section ID (shopify-section-template–176860 97789153__image_banner_hBwjhr); applying the suggestion made the desktop banner appear on mobile.
- Suggestion 2: Apply display: block to alignment-based classes in base.css: .banner.banner–content-align- left.banner–content-align-mobile-center { display: block !important; }.
Status: No confirmation that the mobile disappearance is resolved. Key question remains whether selector targeting and display overrides address the mobile rendering without breaking the clickable overlay. Images are central to illustrating the issue.