Background video on mobile has a black border

[Fogveli]

 

Does anyone know how I can get rid of the black border at the bottom of my video background? I created a video-background.liquid in Sections on edit code. On desktop everything looks ok I even got rid of the excess empty background under it, but on mobile I still see that black thick border. Thanks for the help 

[MandasaTech · Accepted solution]

Hello @Fogveli,
Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

@media screen and (max-width: 767px){
.videoBackground .videoBoxInfo {
padding: 0px !important;
}

}

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

[GemPages]

Hello @Fogveli 

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[Fogveli]

I sent you a message with the details, thank you for reaching out 👍

[MandasaTech]

Hello @Fogveli 
Please share your website URL.

[Fogveli]

Hi, I sent you a message with all the details. thank you

[MandasaTech · Accepted solution]

Hello @Fogveli,
Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

@media screen and (max-width: 767px){
.videoBackground .videoBoxInfo {
padding: 0px !important;
}

}

Was my reply helpful? Please Like and Accept Solution. This mean alot to me.

[Fogveli]

Thank you sooo much! It worked. You are golden! ⭐⭐⭐⭐⭐

[Fogveli]

@MandasaTech coming back with another issue. Your solution worked wonders and the black border is gone, but now I have a huge space gap between the header and the video (still only on mobile) on desktop everything is ok. Could this also be solved from the code? Thank you! I really appreciate your help

[MandasaTech]

@Fogveli 

Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

@media screen and (max-width: 767px){
.videoBackground .videoBox {
min-height: 300px !important;
}
}

[Fogveli]

@MandasaTech just did it and unfortunately it did nothing. 

[MandasaTech]

@Fogveli 
1. Go to Online Store-> Theme-> Edit code
2. Open your theme.liquid theme file
3. Paste the below code before </body> 

<style>
@media screen and (max-width: 767px){
.videoBackground .videoBox {
min-height: 300px !important;
}
}
</style>

[Fogveli]

 @MandasaTech Nothing. I'm beginning to suspect it could be because bottom margin of header. I adjusted it to 0px and for desktop now I have no space between header and video which is perfect but it didn't also make a difference for mobile. It is still the same

 

 

[MandasaTech · Accepted solution]

@Fogveli 

1. Go to Online Store-> Section -> Video section
2. Find this CSS class on video section - ".videoBackground .videoBox" Using of (ctrl+f) .
3. Now replace min-height: 380px !important; to min-height: 300px !important;

[Fogveli]

@MandasaTech you are a golden genius. It worked! Thank you endlessly for helping out ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

[StillScorin]

Hey Ive been following the help on this thread as I was going through similar problems but everything was fine but now on my homepage if i try to add anything new my footer menu overlaps it and i cant figure out how to fix it .