Fixed, Relative, and Viewport Sizing in Framer (Fundamentals Lesson 10)

Creating layouts that look and behave the way we want them to largely comes down to choosing the right sizing mode for each element.

As you know, we have several to choose from — and each has a unique purpose, depending on how static or flexible we want things to be.

Earlier in this chapter, we unpacked “Fill” and “Fit Content” sizing — but there’s also a time and place to use “Fixed”, “Relative”, and “Viewport” sizing.

Whether we want our elements to remain at a specific size, scale with our layout, or even respond to a viewer’s screen size, we’ve got options to get the job done.

So let’s dive a bit deeper into how these next three sizing methods work and when to use each one.

00:00 Intro
00:06 Fixed sizing explained
00:24 Locking aspect ratios with fixed sizing
00:59 When to use fixed sizing
00:36 Relative sizing explained
03:28 Example of relative sizing
04:22 Viewport sizing explained
04:55 Setting full screen hero sections
05:26 Recap of sizing and positioning modes
06:40 Wrap up

🌞 Start for free: https://framer.link/yt
📚 Learn more at: https://framer.link/yt-academy
💎 Join the Community: https://framer.link/yt-community
🎉 Follow on X: https://framer.link/yt-x