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
@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
Hasn’t resolved the issue. would there be something to alter in video-background.liquid code?
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
I have theme.liquid, theme.js and theme.scss.liquid
Attempted in theme.scss.liquid and it didn’t work
@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
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
@rogue_johnson
So sorry. My bad.
This code is broken, please fix it:
https://prnt.sc/PAG4PIKmF5xK
1 Like
Thank you, You’re the best.
1 Like