Video background white border in mobile version (Refresh theme)

[Joppe1612]

I've added a video background to my Shopify store, first I added it to the header but then the video background was all over the website and I only wanted it on the home page. So I added it to the section "template" instead of "header" and now there's a white border above the video on the mobile version. (See video) please someone help me out 🙂 Thanks in advance! 

[Joppe1612]

Linke to the website > https://shopdrifty.com 

[PageFly-Theodor · Accepted solution]

Hi @Joppe1612,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Video Background White Border In Mobile, let’s try this solution:
Online Store ->Theme ->Edit code
Assets ->Base.css

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

}
}
.videoBackground .videoBox {
    display: flex;
    flex-direction: column;
}

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

[syedsumaimaly]

Hi @Joppe1612 

Follow these Steps:

Go to Online Store  Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above </body> tag

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

}
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solutions.