Webflow Layout Techniques

Aspect Ratio

No items found.
Overview
Responsive Layout Techniques
Intro
102
Element Layouts
Aspect Ratio
Int
201
Responsive Image Annotations
Int
6:50
202
Collection List Alternating Item Layouts
Int
4:32
601
Collection Page & Collection List Layouts
Collection List Card Layouts
Int
4:32
601
Creating Variable Layout Options, per Collection Item
Int
11:46
602
Random List Items on Every Page Refresh
Intro
10:00
603
Variable Collection Item Sizes in a Grid Layout
Int
603
Limit Collection List Items by Breakpoint
Intro
10:00
604
Hide Collection List on Empty, or Item Qty
Intro
605
Responsive Pagination
Intro
605
Masonry Grid Layouts
Intro
607
Glossary w/ Letter Groupings
Intro
612
Master-Detail Layouts
Master-Detail Layouts
Intro
710
CMS-Driven Expando
Intro
19:42
714
CMS-Driven Modals
Intro
715
Special Layouts
Creating Leader Lines
Int
5:54
821
Photo Gallery Layouts
Int
821
Column Layouts
Int
822
Text Layouts
Int
823
Advanced Techniques
Breakpoints
Adv
901
No items found.

Once in awhile I come across a need to control an element's aspect ratio, while giving it the freedom to scale with the layout.

Recently I needed this for an circular icon container, constructed like this;

<div><svg>...</svg></div>

The circle containing the icon needed to scale as a % of its parent, but how to keep the height of that container fixed 1:1 with the width, so that it would remain a perfect circle?

CSS to the Rescue

There are probably several ways to do this in Webflow, and I need to look into them, but I immediately wondered whether CSS has a built-in way to specify aspect-ratio.

And in fact, there is. It's called aspect-ratio.

.element {  aspect-ratio: 1 / 1; /* a perfect square */ }

The general format is;

aspect-ratio: auto || <ratio>;

Learn more

The DIV padding Approach

Another approach commonly seen in responsive sites that use video embeds, is to use nested DIVs with a particular CSS trick for padding.

It looks like this;


<style>
.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}
</style>

<div class="demoWrapper">
  <div>
</div>

There is a nice write-up on SO here;

Maintain the aspect ratio of a div with CSS

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.