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

[torisamorgan]

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

 

[BrewBrains]

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 </body> on theme.liquid

<style>
@media only screen and (max-width: 600px) {
.banner {
    height: auto !important;
}
}
</style>

Thanks.

[torisamorgan]

thanks a lot this worked

[HDL-Shin]

Hi @torisamorgan,

You can try this code by following these steps:

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

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

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: 

Hope this can help you

Kind regards,

HDL-Shin

[devcoders]

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 :- 

[ErSanjay]

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

[devcoders]

@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.

[PageFly-Noah]

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 </body>

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

</style>

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[krishnatulasi]

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!