2 Ways to Create Aspect Ratios in Webflow

ABOUT -
We'll cover two ways to create aspect ratios in Webflow. One is the "padding hack", which can be done using all native Webflow styles. The other is the relatively new "aspect-ratio" CSS property. It's not in Webflow yet, but we can add it in an HTML embed element and see it right in the designer.

CHAPTERS -
Intro | 00:00
Styling the Padding Hack | 02:10
The Padding Hack and Responsiveness | 10:10
Pros and Cons fo the Padding Hack | 11:19
Styling with "aspect-ratio" | 13:28

-- LINKS --
Mozilla Article
https://developer.mozilla.org/en-US/d...

Can I use Link:
https://caniuse.com/?search=aspect-ratio

Staging URL:
https://jocando-tutorials.webflow.io/...

Read only Preview Link:
https://preview.webflow.com/preview/j...

-- SKILLSHARE --
If you're a beginner or intermediate user, check out my Skillshare class: "Webflow for Beginners." Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don't have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free.
https://skl.sh/2PU9tML

All Tutorials:
https://jocando-tutorials.webflow.io/

ABOUT ME -

Serve - My Creative Studio’s Site
https://www.madebyserve.com/

Dribbble
https://dribbble.com/Jose_Ocando

Twitter
  / jaocando