More Webflow experiments, tips and tricks on inb4.webflow.io — Follow @vinchubang on Twitter, @vin on Webflow

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

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%.