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

torisamorgan
Tourist
4 0 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

Replies 6 (6)

BrewBrains
Shopify Partner
137 23 29

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.

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Partner


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

HDL-Shin
Shopify Partner
80 20 15

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

 

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

HDLShin_1-1715482551136.png

 

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

Hope this can help you

Kind regards,

HDL-Shin

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️

devcoders
Shopify Partner
145 19 34

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

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

ErSanjay
Shopify Partner
307 20 44

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

Business Owner & Shopify Plus, Shopify app , Shopify Consultant - Full Stack Sofware Engineer
Warm regards,
Er Sanjay

If you find yourself in need of assistance with your store, don't hesitate to reach out! Feel free to send me a direct message, and I'll do my best to help you out.
devcoders
Shopify Partner
145 19 34

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

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

PageFly-Noah
Shopify Partner
1156 205 232

 

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.