pbueno24 Posted January 19, 2022 Share Posted January 19, 2022 Site URL: https://pte.squarespace.com/ password: Party Hello, We have a background video as the hero section for our home page and I'm not sure how to fit it for mobile. I've tried a couple of ways, but I couldn't get it to work. It has a 16:9 aspect ratio and I believe the longest side is 2000 pixels. Thanks, Patrick Link to comment
tuanphan Posted January 20, 2022 Share Posted January 20, 2022 First, edit this CSS section[data-section-id="611282352e5bfe168df6dbfd"] { width: 100% !important; height: 100vh !important; } to this @media screen and (min-width:992px) { section[data-section-id="611282352e5bfe168df6dbfd"] { width: 100% !important; height: 100vh !important; } } Next, add this CSS /* resize home top video mobile */ @media screen and (max-width:767px) { [data-section-id="611282352e5bfe168df6dbfd"] video { width: 100% !important; height: auto !important; left:0 !important; } [data-section-id="611282352e5bfe168df6dbfd"] { min-height: unset !important; height: 30vh !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
pbueno24 Posted January 20, 2022 Author Share Posted January 20, 2022 Hey @tuanphan Thanks for the help! I have a few bugs regarding the background video that I hope you'd be able to help with. 1. How can I get rid of that extra blue space that shows up below the video? This was one of the issues I was running into when trying to work this out myself. 2. When I rotate my phone the video gets cropped. Is there a way to prevent that? 3. Can we scoot the video down to leave space for the Part Time Evil header? Thanks, Patrick password: Party MobileBackgroundVideoBugs.MP4 Link to comment
tuanphan Posted January 21, 2022 Share Posted January 21, 2022 #1. Try reduce number 30 #2. change 767 to 991 #3. You mean black header + move video under header? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment