Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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!
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
Hi @GiudFabri123 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks
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!
It worked! thank you
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
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!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024