How do I get blocks to expand the entire page?

Design help Layout & Design
1

Hi,

I am trying to get a few things on this page to stretch across the entire width. First, I’d like the second section to stretch the entire page, which it is, but when you expand your browser, the videos and text move and don’t stay in place. If you make your browser small enough, the lighter black even comes behind the image. How do I get it so the content stays where it should be regardless of your browser size?

Secondly, for the three-GIF banner at the bottom, how do I get it to stretch the length of the entire page? I have played with all of the settings and am not sure what I am missing to get the three photos to stretch across.

Thank you in advance.

Here is my site Read-Only: Webflow - Goodwork Productions

2

Hi @goodwork,

Your issue is due to the height you’ve set on about-us-top.

A fix is removing the fix height so the elements are free to shift and resize the height.

  • Make about-us-wrapper as a grid with 1 col, 1 row & 0 gap.
  • Remove margin bottom on about-us-top
  • Add top and bottom padding to about-ustop

That should work but you still have to customize the layout for mobile landscape and portrait :+1:

3

Thanks again!

That seem to fix it for the most part, however, when you shift your screen size, the distance from the bottom of the second video and the bottom of the ‘dark grey section’, does not remain even. A lot of times there is more space in the border on top of the video than on the bottom.