Make banner larger in height so it covers the whole homepage, just like the desktop version. Thanks!
Topic summary
Goal: make the mobile homepage banner fill the screen height similarly to desktop and keep text positioning clean.
Primary solution (Shopify CSS tweak):
- In theme code (section-image-banner.css), adjust the mobile media query for the banner content. Change the min-height value from 39rem to a larger value (example: 67rem) under max-width ~749px, targeting “.banner–large:not(.banner–mobile-bottom):not(.banner–adapt) .banner__content”.
- “rem” is a CSS unit relative to the root font size; increasing it makes the banner taller on mobile. This also prevents the text from shifting upward.
Follow-up refinement (spacing between title and button):
- Add a mobile media query (max-width ~750px) and apply a vertical translate to “.banner__heading” (e.g., transform: translateY(-45px)). Adjust the number to fine-tune spacing while keeping center alignment.
Visuals: Before/after screenshots were shared to illustrate results.
Outcome/status: A practical CSS fix and refinement were provided. The user confirmed the height change looked good and received guidance to fine-tune title-to-button spacing. The thread appears resolved pending final confirmation; values can be adjusted to preference.
Hi @MiguelMaya
To change the height of the banner on mobile, follow these steps
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file section-iamge-banner.css. Search for the following CSS snippet
@media screen and (max-width: 749px) {
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 39rem;
}
}
The number 39rem is currently limiting the maximum height that the banner can achieve. Please change it to a different number; here, I’ve chosen the number 67rem.
@media screen and (max-width: 749px) {
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 67rem;
}
}
Result
Then the issue of the text moving up will disappear.
If it helps you, please like and mark it as the solution.
Best Regards
1 Like
looks neat. Can i add more space between the title and the button, still staying centered? Thanks!
Hi @MiguelMaya
Of course. Still in the file section-image-banner.css and add this code snippet to the end of the file
@media screen and (max-width: 750px) {
.banner__heading {
transform: translateY(-45px);
}
}
Result
Change the number -45 to see the difference.
If it’s helpful, please like and mark it as a solution, thank you