Video background white border in mobile version (Refresh theme)

Store Design
,

Topic summary

A Shopify store owner using the Refresh theme encountered a white border appearing above a video background on mobile devices. The issue arose after moving the video from the header section to the template section to restrict it to the homepage only.

Proposed Solution:
Two support representatives suggested identical CSS fixes:

  • Navigate to: Online Store → Theme → Edit Code → Assets → base.css
  • Add a media query targeting screens up to 767px width
  • Apply CSS rules to .videoBackground and .videoBox classes to adjust display properties and remove minimum height constraints

Status:
The discussion remains open with no confirmation from the original poster about whether the suggested CSS solution resolved the mobile border issue.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

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 :slightly_smiling_face: Thanks in advance!

2

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

3

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

1 Like
4

**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 tag

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

}
}

RESULT:

syedsumaimaly_0-1696329221021.png
syedsumaimaly_0-1696329221021.png316×499 57.1 KB

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