Solved

Video background white border in mobile version (Refresh theme)

Joppe1612
Tourist
12 0 0

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! 

Accepted Solution (1)

PageFly-Theodor
Navigator
356 51 53

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 3 (3)

Joppe1612
Tourist
12 0 0

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

PageFly-Theodor
Navigator
356 51 53

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

syedsumaimaly
Trailblazer
147 16 19

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:

 

syedsumaimaly_0-1696329221021.png

 

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