I can't remove the white space below my image banner for the mobile version

Store Design

Topic summary

A user encountered unwanted white space below an image banner on their Shopify store’s mobile version. Multiple community members provided CSS-based solutions:

Common CSS approach:

  • Navigate to Online Store → Theme → Edit code
  • Locate base.css, theme.css, or styles.css
  • Add media query targeting mobile viewports (max-width: 767px or 749px)
  • Set banner height to auto !important

Alternative non-code solution:
One contributor suggested simply deselecting the ‘Show container on mobile’ option in the theme’s customization settings for the image banner section.

Resolution:
The original poster confirmed that one of the solutions worked, successfully removing the white space. The issue appears resolved, with the non-code approach being the simplest method that proved effective.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Please i need help on how to remove the whitespace from below my image banner on the mobile version.

Screenshot 2024-05-11 at 8.10.40 PM.png
Screenshot 2024-05-11 at 8.10.40 PM.png856×1542 215 KB

1 Like
2

Hi @torisamorgan ,

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.
    2. Open your theme.liquid file
  2. Paste the below code before on theme.liquid

Thanks.

1 Like
3

Hi @torisamorgan ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

HDLShin_0-1715482493032.png
HDLShin_0-1715482493032.png1902×899 133 KB

Step 2: Search file base.css, theme.css or styles.css

HDLShin_1-1715482551136.png
HDLShin_1-1715482551136.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (max-width: 767px) {
  .banner {
    height: auto !important;
  }
}

Result:

HDLShin_2-1715482632310.png
HDLShin_2-1715482632310.png655×797 267 KB

Hope this can help you

Kind regards,

HDL-Shin

1 Like
4

Hi @torisamorgan

  • Go to Online Store → Theme → Edit code.
  • Find the file assets/base.css and paste the code below at the bottom of the file."
@media screen and (max-width: 749px){
.banner--stacked {
height: auto!important;
}
}

Screenshot :-

devcoders_0-1715484917976.png
devcoders_0-1715484917976.png700×637 230 KB

1 Like
5

@devcoders @BrewBrains @HDL-Shin Thank you for your answer. It was really helpful and helped me a lot. Thanks for your answers.

1 Like
6

@ErSanjay

You’re welcome! I’m glad I could help. If you have any more questions or need further assistance, feel free to ask anytime.

7

This is Noah from PageFly - Shopify Page Builder App

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

1 Like
8

Hi @torisamorgan ,

To address the issue of white space below the image banner, I discovered a solution that doesn’t involve adding any code. Instead, simply deselect the ‘Show container on mobile’ option in the customization settings of the image banner. This adjustment effectively removes the white space below the image banner without any need for additional coding

If my suggestion works for you, please let me know by giving it a like or marking it as a solution. Thanks!

9

thanks a lot this worked