Responsive Square

And other fixed ratio elements

This square edges are always equal to 50% of the width of the page. Try shrinking or enlarging the browser.

This square dimensions are only defined by width:50% and padding-bottom:50%.

The counter-intuitive rule its based on is: a percentage value on top/bottom padding or margins is relative to the width of the containing block

Using this rule you can create elements that are responsive or elastic, but always keep the same ratio. Check below for a video container example.

Open this site in Webflow

Made by Vincent Bidaux using Webflow.
For more, follow inb4.webflow.io, @vin & @vinchubang on Twitter.

Responsive Video Container

This element always keep a 16/9th ratio (for HD video). Try shrinking or enlarging the browser.

This element dimensions are only defined by width:50% and padding-bottom:28.125%.