Make Homepage Video Banner Take Up Full Mobile Screen

Store Design

Topic summary

A store owner is experiencing an issue where their homepage video banner displays correctly on desktop but only occupies half the screen on mobile devices.

Problem: Video banner not filling full mobile screen on rivieraclub.com.au

Solutions Provided:

Two different CSS-based fixes were offered:

  • PageFly-Richard’s approach: Add custom CSS code to the theme.liquid file, placing it above the closing tag

  • DaisyVo’s approach: Navigate to Shopify admin → Online store → Customize → Theme settings → Custom CSS, then paste mobile-specific CSS targeting the banner element with max-width: 768px media query

Both solutions involve adding custom CSS code to adjust the video banner’s height and object-fit properties specifically for mobile screens. The discussion remains open as the original poster has not confirmed whether either solution resolved the issue.

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

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

1 Like
2

Hi @MarissaW

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

3

https://rivieraclub.com.au/

Thanks

4

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

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

5

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;
}
}

image (5).png
image (5).png344×579 159 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.