How can I remove the empty white space at the bottom of my hero banner on MOBILE?

Store Design

Topic summary

A user encountered unwanted white space at the bottom of their hero banner, but only on mobile devices. The banner wasn’t displaying at full width as intended.

Solutions Provided:

  • DaisyVo suggested adding CSS code to the base.css file to adjust section padding:

    .section {
    padding-top: 10px !important;
}

  • Dan-From-Ryviu recommended adding media query code to Custom CSS in Theme settings to set the hero banner height to full viewport:

    @media (max-width: 749px) {
    #shopify-section-template--18322925224182__hero_banner_jh7CrN .hero__inner {
        height: 100vh;
    }
}

Resolution:
The original poster confirmed the issue was resolved by adding code to base.css rather than through the theme editor. Both solutions involved CSS modifications targeting mobile viewport dimensions.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
4

it worked but I had to put the code in base.css not inside the theme editor, thank you :slightly_smiling_face:

1 Like