All things Shopify and commerce
Hello, I would like to expand my image banner on the mobile version to go "full screen", not that square format. I tried going with some custom css from other sollutions in the community but nothing worked. I edited the code before to make some edits to the header (making it transparent and expanding the image banner up) and maybe it has something to do with it. This is the website: https://adorcollective.com
pw: geicay
thank you.
Solved! Go to the solution
This is an accepted solution.
@adorcollective
Okay in that case you can update my previous code with
@media screen and (max-width: 749px){
#Banner-template--21354181296471__image_banner.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!
This is an accepted solution.
@adorcollective
Glad it worked
Please mark it as a solution as it has solved your issue.
Related to your above query, yes it is possible. You can add the below code at the end of same file
@media screen and (max-width: 749px){
#Banner-template--21354181296471__image_banner .banner__content {
align-items: end;
}
}
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!
This is Noah from PageFly - Shopify Page Builder App
Please add code here to change full screen banner:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>
<style>
@media screen and (max-width:767px){
.banner__media img{
height: 50vh !important;
}
}
</style>
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
It somehow expands but it expands the banner inside the square, not the square itself.
Hi @adorcollective iam sorry please add again code here:
<style>
@media screen and (max-width:767px){
#Banner-template--21354181296471__image_banner{
height: 50vh !important;
}
.banner__media img{
height: 50vh !important;
}
}
</style>
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Hi @adorcollective
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!
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.
This is an accepted solution.
@adorcollective
Okay in that case you can update my previous code with
@media screen and (max-width: 749px){
#Banner-template--21354181296471__image_banner.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!
Perfect!! thank you. Another question maybe you can help me. I would like now because the banner is full screen to put the "View Collection" button and "new launch" text lower on the banner. Is it possible?
thank you.
This is an accepted solution.
@adorcollective
Glad it worked
Please mark it as a solution as it has solved your issue.
Related to your above query, yes it is possible. You can add the below code at the end of same file
@media screen and (max-width: 749px){
#Banner-template--21354181296471__image_banner .banner__content {
align-items: end;
}
}
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!
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025