Video Banner landing page full screen on mobile?

Solved

Video Banner landing page full screen on mobile?

OmneGuitars
Visitor
2 0 0

Trying to get my Video Banner on my landing page to fit fullscreen on desktop and mobile. It looks close on desktop, with a small white space along the bottom, but on mobile it only fills the top of the screen, and the rest of the page is white. My "enter" button is in the middle of the screen which is ok.

Screen Shot 2024-10-03 at 10.18.00 PM.pngScreen Shot 2024-10-03 at 10.20.26 PM.png

link to my site

 

https://i4nkwiv7rxpyx8mj-88142479677.shopifypreview.com

Accepted Solution (1)

Debular
Explorer
39 3 3

This is an accepted solution.

Try to add this code to custom CSS

@media screen and (max-width: 767px) {
.media.video-background>*:not(.zoom){
height:100vh!important;
object-fit:cover!important;
}

View solution in original post

Replies 2 (2)

Debular
Explorer
39 3 3

This is an accepted solution.

Try to add this code to custom CSS

@media screen and (max-width: 767px) {
.media.video-background>*:not(.zoom){
height:100vh!important;
object-fit:cover!important;
}
OmneGuitars
Visitor
2 0 0

Amazing! Thank you. Is there a way to also get rid of the blank white space at the bottom on the desktop version? To automatically adjust to be full screen there as well?