Hey all here’s the breakdown of my situation:
I’ve uploaded a series of super short 1080 x 1920 (16:9) background videos that will basically function as looping GIF’s minus the large file size and poor image quality. The background videos are setup within a div, and the div is contained within a section. Each section contains its own visual (e.g. looping video or static image) and/or copy. The sections are all contained within a container.
From a responsive design standpoint, I’m unable to get all of my visuals (e.g. looping videos, static images) to scale responsively to window/viewport size changes while maintaining the 16:9 ratio of my visuals AND the original margins between all sections. I’ve attached some screenshots, one of which shows the video looking good on desktop view, while the other video looks cutoff and terrible on my phone view.
THINGS I’VE ALREADY TRIED:
I found this prior thread from 2019 and I tried inserting the custom code into my head section like the person recommends, which worked for this person (and apparently many other people on this thread), but it did nothing for me.
I’m stuck! Any help would be greatly appreciated. Hopefully I was detailed enough. I’ll leave a link to my website so you can maybe try to see what I’ve done wrong and/or how I can fix this.
PS: I’m very new to all of this so that’s maybe why I’m struggling a little.
Here is my site Read-Only: