Background/Banner video doesn't resize well for mobile Debut Theme

Technical Q&A
1

https://ecomexperts.io/blogs/liquid-tutorial-shopify/background-video

Entered the from the link above for a banner video, loads great on PC, on mobile there is a black bar at the bottom and excessive spacing above it, unsure on how to resolve the issue

website is www.calamitycult.com

2

@rogue_johnson ,

.videoBackground .videoBox {
    min-height: auto;
}
.videoBackground .videoBoxInfo {
    padding: 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

1 Like
3

Hasn’t resolved the issue. would there be something to alter in video-background.liquid code?

4

Hi @rogue_johnson

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.scss.css->paste bellow code in bottom of file

@media screen and (max-width: 767px)

.videoBox {

min-height: 0px !important;

}

.videoBoxInfo{

display: none !important;

}

}

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly

1 Like
5

I have theme.liquid, theme.js and theme.scss.liquid

Attempted in theme.scss.liquid and it didn’t work

6

@rogue_johnson

For theme.liquid you need to add this code in . tag

Follow this:
Go to Online Store->Themes->Edit Code->theme.liquid->paste below code in tag

@media screen and (max-width: 767px) { .videoBox { min-height: 0px! important; } .videoBoxInfo { display: no! importance; } }

Please refer to this screenshot: https://prnt.sc/WUDYJr23XElV

Thank you.

1 Like
7

Thank You! one step closer. the gap at the top is gone, just have a black bar at the bottom of the video that doesn’t appear on the website

8

@rogue_johnson

So sorry. My bad.
This code is broken, please fix it:
https://prnt.sc/PAG4PIKmF5xK

1 Like
9

Thank you, You’re the best.

1 Like
10

@rogue_johnson

My pleasure :blush: