Hi there! I hope your Thanksgiving weekend was fantastic. I’d like the video banner to be full screen with a 16:9 ratio on mobile, and I want the text “Elevating your style” to appear on top of the video, just like it does on desktop. How can I make that work? [Screen Shot 2023-11-25 at 6.51.35 PM…

Hi @BrentonLoui , can you share your store url?

@BrentonLoui , it has the correct aspect ratio on mobile: [Abdosamer_0-1700968504020.png]

I’d like the video to occupy the full 16:9 screen on mobile devices, with the text overlaying the video. Please ensure there’s no white space at the bottom of the screen.

@BrentonLoui , go to section-video-banner.css and add the following code: @media (max-width:768px){ .video-banner__media--cover video { object-fit: cover; height: 50vh !important; } }

Making video banner full screen with 16:9 ratio

Store Design

BrentonLoui November 26, 2023, 3:12am 3

https://inthemake.co/

Topic		Replies	Views
Video Banner landing page full screen on mobile? Shopify Apps shopify-apps	2	62	October 4, 2024
Make Homepage Video Banner Take Up Full Mobile Screen Store Design design	4	51	December 24, 2024
mobile and desktop video banner Shopify Discussion troubleshooting	6	141	August 30, 2024
How can I fix the banner height issue on mobile for my website? Technical Q&A css , html	3	59	January 6, 2024
Mobile and desktop video Store Design design , css , shopify-themes , html	9	138	November 8, 2024

Making video banner full screen with 16:9 ratio

Related topics