Remove white under custom video

[Hausi]

 

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)

[Taknify · 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. 

[AcidPi]

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

[Taknify]

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. 

[Hausi]

Thanks for the reply.

hausi.nl 

pw protected: theepa

[Taknify · 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. 

[Hausi]

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

[Taknify]

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. 

[Anshul_arora · 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.

[Hausi]

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.