Well TY, it actually worked but I have another image banner down next to the products that it was also afected by this. I want only for the top image.
Topic summary
A Shopify store owner using the Dawn theme wants to make their image banner display full-screen on mobile devices instead of the default square format.
Initial Problem:
- Banner appears in square format on mobile
- Previous CSS solutions from community didn’t work
- Store owner had made custom edits to header (transparent with expanded banner)
Solution Provided:
Add CSS code to “section-image-banner.css” file:
@media screen and (max-width: 749px){
.banner:not(.banner--stacked) {
height: 100vh;
}
}
Follow-up Issue:
The code affected multiple banners on the page. To target only the top banner, the solution was refined with a specific ID selector:
#Banner-template--21354181296471__image_banner.banner:not(.banner--stacked)
Additional Request:
With full-screen banner implemented, user wants to reposition the “View Collection” button and “new launch” text lower on the banner. A CSS solution using align-items: end on the banner content wrapper was provided.
Status: Resolved - user confirmed the solutions worked successfully.