Remove white under custom video

Solved

Remove white under custom video

Hausi
Tourist
18 0 1

image.png

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)

Accepted Solutions (2)
Taknify
Shopify Partner
202 14 25

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. 

 

Need to tweak your store a bit? Come and visit us at Taknify or send me message.

View solution in original post

Anshul_arora
Navigator
450 128 93

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 -:

Anshul_arora_0-1718690591219.png

Anshul_arora_1-1718690605096.png


I hope the code helps you.


Please share if you have any queries.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 8 (8)

AcidPi
Shopify Partner
61 14 16

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
Shopify Partner
202 14 25

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. 

Need to tweak your store a bit? Come and visit us at Taknify or send me message.
Hausi
Tourist
18 0 1

Thanks for the reply.

 

hausi.nl 

pw protected: theepa

Taknify
Shopify Partner
202 14 25

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. 

 

Need to tweak your store a bit? Come and visit us at Taknify or send me message.
Hausi
Tourist
18 0 1

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. 

Hausi_0-1718719921520.png

 

Thanks again for your time

Taknify
Shopify Partner
202 14 25

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. 

Need to tweak your store a bit? Come and visit us at Taknify or send me message.

Anshul_arora
Navigator
450 128 93

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 -:

Anshul_arora_0-1718690591219.png

Anshul_arora_1-1718690605096.png


I hope the code helps you.


Please share if you have any queries.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Hausi
Tourist
18 0 1

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. 

Hausi_0-1718721492532.png