Mobile Full screen Image banner

[GiudFabri123]

Hello,
I managed to get the main image banner full screen on the the PC version, but on a mobile version it leaves a big white empty chunk below the image, is there any way not to have this empty gap? 

[rajweb]

Hey @GiudFabri123 ,

To fix the issue of the large white space under the banner on the mobile version of your Shopify store, you'll likely need to adjust the CSS or the Liquid code responsible for the image banner's layout. The issue might occur due to padding, margin, or improper aspect ratio handling.

Add the following CSS to your theme to ensure there's no extra spacing on mobile:

@media only screen and (max-width: 768px) {
  .banner-container {
    margin: 0;
    padding: 0;
    height: auto; /* Ensures it fits content */
  }

  .banner-image {
    height: 100vh; /* Makes the image fill the viewport height */
    width: 100%; 
    object-fit: cover; /* Prevents image distortion */
  }
}

Steps to Apply CSS:

1. Online Store > theme > Edit Code 

2. Under Assets, open your theme.css or base.css file.

3. Add the code snippet above at the end of the file.

4. Save the changes and check the mobile version.

These steps should eliminate the empty white gap on the mobile version. Let me know if the problem persists!

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[steve_michael2]

Hi  @GiudFabri123 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[GiudFabri123]

Hi Steve

www.scanditure.com

[steve_michael2 · Accepted solution]

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media only screen and (max-width: 768px) {
   div#Banner-template--20571060011347__image_banner_gNDmzH {
    height: 405px !important;
}
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[GiudFabri123]

It worked! thank you

[steve_michael2]

After reviewing your store, my suggestion is to install Big Bulk Discount to boost your average order value. Our app adds tiered discounts, encouraging larger purchases and driving more revenue with minimal effort. Start increasing sales today! https://apps.shopify.com/big-bulk-discount

[websensepro]

Hi @GiudFabri123 ,

Please hide this container on mobile through customization.

If my reply is helpful, kindly click like and mark it as an accepted solution. 
If you are happy with my help, you can help me buy a COFFEE
Thanks!