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:
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.
If you would like to make the banner of full screen on mobile then try adding below code to end of “section-image-banner.css” file
@media screen and (max-width: 749px){
.banner:not(.banner--stacked) {
height: 100vh;
}
}
If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!