Mobile hero banner shows a blank/black space below the image on the site’s mobile view, creating an unwanted gap before the Rich Text section.
Participants requested the store URL and preview password to inspect; the original poster provided access. A helper confirmed the exact black space via a screenshot.
Fix: Add a mobile-only CSS tweak in base.css (under a max-width: 749px media query) to anchor the banner content to the bottom (position: absolute; bottom: 15px) and remove extra padding/background from the banner text box (transparent). This reduces the gap under the hero image.
Outcome: The original poster confirmed the CSS change resolved the issue. No further action items.
Notes: Screenshots were central to diagnosing the visual spacing problem. Discussion reached a resolution and is closed in practice.
Hi all,
Please could you let me know if there is a way of fixing the hero banner on the mobile version of my site.
On the desktop, it displays perfectly however on the mobile version, there is blank space underneath the picture.
Is there a way of making the gap between the hero banner & the Rich Text block smaller so that this doesn’t happen?
Any suggestions greatly appreciated.
Hey @sa_wal
Please share website link here.
@sa_wal hope you are doing well.
Could you please share your store URL? so can check and guide you
Edit comment
Password: PW1234
Yes exactly that. Thanks
@sa_wal Please add below line of CSS code at the end of your base.css file
@media(max-width:749px){
body .banner--mobile-bottom:not(.banner--stacked) .banner__content{
position: absolute;
bottom:15px;
}
body .banner--mobile-bottom .slideshow__text.banner__box{
padding:0;
background-color:transparent;
}
}
the result will be:
That has fixed the problem. Thank you very much!!
