Make Homepage Video Banner Take Up Full Mobile Screen

[MarissaW]

I've currently got a video banner on my hopmepage. It looks great on desktop, however on mobile it only takes up half the screen. How do I make it take up the full screen on mobile? Thanks

[LizHoang]

Hi @MarissaW 

Can you share with me the store link to check further on it? Thank you

[MarissaW]

https://rivieraclub.com.au/

Thanks

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @MarissaW   Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

<style>
 @media screen and (max-width: 767px){
  #Banner-template--23292092023105__image_banner{
    height: 90vh !important; 
}
 #Banner-template--23292092023105__image_banner .banner__media video{
    height: 90vh !important;
    object-fit: cover !important;
}
}

</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

[DaisyVo]

Hi @MarissaW 

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
body #Banner-template--23292092023105__image_banner .banner__media video {
    height: unset !important;
    object-fit: contain !important;
}
.banner__media.media.video-background {
    height: 220px !important;
}
body #Banner-template--23292092023105__image_banner {
    height: 220px !important;
}
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.