All things Shopify and commerce
Hi everyone.
I can’t seem to find the answer to my problem. How do i remove the big white space under my homepage video? It also seems to conflict with my highlighted collections on the frontpage (most populair and new products) and the footer (signup e-mail and other footer texts)
Solved! Go to the solution
This is an accepted solution.
Hello,
To solve this issue please go to Online Store -> Themes -> Edit Code.
Open your theme.liquid file.
CTRL + F and search for </head>
Before the </head> line add
<style>
.videoBackground {
height: auto;
}
</style>
and save.
Let me know if that works for you. If you need help, DM me.
This is an accepted solution.
Hello @Hausi
I understand you are looking to remove unnecessary space appearing under the banner section.
Please add the below code at the bottom of the theme.liquid file before </body> tag and save.
<style>
.videoBackground {
height: fit-content !important;
}
</style>
Output -:
I hope the code helps you.
Please share if you have any queries.
Thank you.
Hi,
Try adjusting the Section Padding via Theme Editor for Video Section (Bottom padding) and Highlighted Collections Section (Top padding)
Theme Editor > (Left Column) Template - Click Section > (Right Column) Section padding - adjust Top padding, Bottom padding to 0px.
Regards
Can you share your url and password if it is protected? Without the url of your website, we can't really see what is causing that issue for you.
This is an accepted solution.
Hello,
To solve this issue please go to Online Store -> Themes -> Edit Code.
Open your theme.liquid file.
CTRL + F and search for </head>
Before the </head> line add
<style>
.videoBackground {
height: auto;
}
</style>
and save.
Let me know if that works for you. If you need help, DM me.
Thank you. This resolves the issue. Only one more problem occurs on mobile after the solution. When i click on categories on the left (see image) it is not showing the categories. Only when i scroll a bit to the bottom the collection button works correctly.
Thanks again for your time
Hello,
Do the same thing and then now add this code after </head>
@media screen and (max-width: 767px) {
.videoBackground .fullscreen-video-wrap {
z-index: 2;
}
}
Dm me if you face any issues.
This is an accepted solution.
Hello @Hausi
I understand you are looking to remove unnecessary space appearing under the banner section.
Please add the below code at the bottom of the theme.liquid file before </body> tag and save.
<style>
.videoBackground {
height: fit-content !important;
}
</style>
Output -:
I hope the code helps you.
Please share if you have any queries.
Thank you.
Thank you. This resolves the issue. Only one more problem occurs on mobile after the solution. When i click on categories on the left (see image) it is not showing the categories. Only when i scroll a bit to the bottom the collection button works correctly.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025