Mobile Full screen Image banner

Solved

Mobile Full screen Image banner

GiudFabri123
Excursionist
24 0 2

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? 

Accepted Solution (1)
steve_michael2
Explorer
119 17 19

This is an 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!

Crafting exceptional online experiences with innovative design and technology.

View solution in original post

Replies 7 (7)

rajweb
Shopify Partner
211 16 13

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

 

-Need a Shopify developer?
https://rajatweb.dev/
Email: [email protected]

steve_michael2
Explorer
119 17 19

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

Crafting exceptional online experiences with innovative design and technology.
GiudFabri123
Excursionist
24 0 2
steve_michael2
Explorer
119 17 19

This is an 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!

Crafting exceptional online experiences with innovative design and technology.
GiudFabri123
Excursionist
24 0 2

It worked! thank you

steve_michael2
Explorer
119 17 19

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

Crafting exceptional online experiences with innovative design and technology.

websensepro
Shopify Partner
1272 144 160

Hi @GiudFabri123 ,

Please hide this container on mobile through customization.

Screenshot 2024-10-24 173237.jpg

 

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!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial