Designer here thats new to web dev and Webflow as a whole!
So, I’m setting up a webpage to be used as a landing page for my portfolio, and I have a vertical left-side navbar for desktop navigation. Maybe that’s my first mistake, but I want the embedded video to autoplay in a div container (Landing Content) that clears the left side bar and takes up the remaining width of the window finding a comfy center align in between the side bar and the right side of the viewport. The problem arises when at wider breakpoints, the video hogs all the vertical space and overflows the text & png section down and out of the viewport. I would prefer the landing page to be almost like a slide presentation with links, meaning no vertical scroll and a fixed background. I’m trying to preserve the ratio of the logo, but most importantly the embedded video. Every other element won’t be able to change their height to be responsive to the display height of other elements or the page at the desktop breakpoints. However, the 16:9 embedded video would be responsive in width and height, allowing the video to retain ratio, BUT stop growing in size when it overtakes or pushes down the bottom content section, and instead starts centering itself at a max height. I was hoping to make the top video section fixed to the top-center and flexed from L to R , and the bottom element section fixed to bottom-center also flexed L to R.
The responsiveness that I’m aiming for is that the top video section will maintain a vertical margin between the bottom that adapts to wider display sizes, but the priority is that the viewport height remains fixed, and the top/bottom section don’t overflow or break that fixed height, but instead share the space.
The sidebar is relatively positioned to the left side, and then I have a div (Landing Content) used for all the page content to the right of the navbar, and I just used a grid with no margins to place them next to each other
I did this because absolute position required me to add an estimated left margin/padding in order to position the Landing Content right of the navbar, but it had no relativity to the navbar position, so it would flow behind the bar or worse yet the content would size down from the center of the entire webpage, and then clip behind the sidebar. However, now with the relative position, the video embedded now pushes anything below it down out of view. I’ve tried to restrict the video container height, but I run into more complex overflow aspect ratio issues that seem to break the responsiveness. It could entirely be a overflow issue tho, as I am not as familiar.
I’ve gotten as close as I can but I’m wondering if there’s a straightforward fix that will make the responsiveness more consistent across desktop display resolutions. I’m good with design so if the solution is starting it from scratch in Figma to integrate a smoother responsive layout and overflows, I’m all game.
Wide Display:
Narrow Display
Grid Layout
Layer Stack
Here is my site Read-Only: LINK
(how to share your site Read-Only link)