Layout & Design

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

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

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

Joseph

·

7:06

·

68K views

·

Dec 11, 2024

About this lesson

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.

https://www.youtube.com/watch?v=REhpndQmOM8&t=0s Intro

https://www.youtube.com/watch?v=REhpndQmOM8&t=6s Fixed sizing explained

https://www.youtube.com/watch?v=REhpndQmOM8&t=24s Locking aspect ratios with fixed sizing

https://www.youtube.com/watch?v=REhpndQmOM8&t=59s When to use fixed sizing

https://www.youtube.com/watch?v=REhpndQmOM8&t=36s Relative sizing explained

https://www.youtube.com/watch?v=REhpndQmOM8&t=208s Example of relative sizing

https://www.youtube.com/watch?v=REhpndQmOM8&t=262s Viewport sizing explained

https://www.youtube.com/watch?v=REhpndQmOM8&t=295s Setting full screen hero sections

https://www.youtube.com/watch?v=REhpndQmOM8&t=326s Recap of sizing and positioning modes

https://www.youtube.com/watch?v=REhpndQmOM8&t=400s 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

0:00creating layouts that look and behave 0:02the way we want them to largely comes 0:04down to choosing the right sizing modes 0:06for each element as you know we have 0:09several to choose from and each has its 0:11own unique purpose depending on how 0:13static or flexible we want things to be 0:16earlier in this chapter we unpacked fill 0:19and fit content sizing but there's also 0:21a time and place to use fixed relative 0:24and viewport sizing whether we want our 0:26elements to remain at a specific size 0:29scale with our layout out or even 0:30respond to a viewer's screen size we've 0:33got options to get the job done so let's 0:36dive a bit deeper into how these next 0:38three sizing modes work and when to use 0:40each 0:42[Music]0:43one first let's take a look at fixed 0:46sizing when you drew your very first 0:48frame on the canvas and manually played 0:50around with its height and width you 0:52were using fixed sizing it lets us set a 0:55specific pixel value for a layer that we 0:57want to start at that size and stay at 0:59that size 1:00it won't grow or Shrink with its parent 1:02children or siblings there are just a 1:05couple exceptions to that one we 1:07actually looked at in the lesson on 1:09absolute positioning where pinning two 1:11opposite sides will make that Dimension 1:13grow and Shrink with its parent another 1:16exception is a little trick you can use 1:18to lock the proportions or aspect ratio 1:21of something like a photo or logo for 1:23example let's say I've got a stack of 1:25frames with image fills and I want the 1:27width of them to fill their parent but 1:30but I want the height to adjust 1:31accordingly to keep the proportions of 1:33the frame the same at all times starting 1:37with fixed Dimensions I can make sure 1:39that the images are the aspect ratio I 1:41want then I'll turn on the lock aspect 1:44ratio toggle now if I set the width to 1:47fill I've actually locked the fixed 1:50value to the fluid value and now when 1:53the parent frame resizes the fixed value 1:55will update dynamically to maintain the 1:58aspect ratio and this happen in the 2:00canvas and on the browser but those 2:03couple exceptions aside a fixed 2:04Dimension is going to remain static when 2:07things around it resize so it's safe to 2:10say we want to use fix sizing 2:12thoughtfully it's great for smaller 2:13elements like icons Avatar images and 2:17modals and of course locking the aspect 2:19ratio of media elements think of fix 2:22sizing as a way to put things in a 2:24protective shell that prevents them from 2:26getting resized responsively but don't 2:28worry we can still just fixed elements 2:30for different sized devices using break 2:33points but we'll get into that later 2:36unlike fixed sizing relative sizing 2:38allows elements to scale in relation to 2:40their parent we set a percentage of the 2:43parents width or height and that 2:45proportion will be maintained even if 2:47the parent changes size you might be 2:50thinking I thought this was a job for 2:51fill sizing there are a few key 2:54differences first unlike fill sizing 2:57relative sizing works on layers with any 2:59position type including absolute and 3:02fixed second relative sizing ignores 3:05sibling layers and doesn't care about 3:08available space you say 50% and it's 50%3:11of the parent period and third relative 3:15sizing actually lets us go above 100% in 3:19case we want elements to stay larger 3:21than its parent by a certain amount it's 3:23perfect for decorative elements in the 3:24background or foreground that we'd like 3:26to flex in size let's look at an example 3:30here I have a giant oval forming this 3:32sort of planetary element at the bottom 3:34of this hero section the width and 3:36height are both currently set to fixed 3:38so if I preview this and play with the 3:40width of the viewport nothing changes 3:43which means the viewport can get wide 3:45enough that the oval drops off the 3:46bottom and narrow enough that we don't 3:49see much curvature back on the canvas if 3:52I switch the width of this from fixed to 3:55relative we now see a value of 160%3:58since this layer was, 1600 pixels wide 4:01and its parent is currently 1,000 pixels 4:03wide on the canvas framer converts the 4:06current size relationship into a 4:08percentage for us automatically now if 4:11we preview this the oval flexes to 4:13remain 160% of the width of its parent 4:16no matter how wide or narrow that is all 4:19right we've got one last sizing mode to 4:21learn viewport sizing which in framer is 4:25specific to height viewport sizing lets 4:27us set a percentage of the height of The 4:29View viewers browser window AKA viewport 4:32we want an element to occupy for 4:34instance here we have a hero section 4:37that looks really great when it fills 4:39the whole browser but since we can't 4:41predict the height of everyone's browser 4:42window this is a job for viewport sizing 4:46the unit of measurement is VH for 4:49viewport height and 1 VH equals 1% of 4:53the viewport height so by setting the 4:55section's height to 100 VH we're telling 4:58it to fill 100% of the height of the 5:01browser no matter how tall the window is 5:04since the nature of viewports is that 5:05they vary we get a little handle on the 5:08canvas that we can drag to see exactly 5:10how our design will Flex in relation to 5:12the browser window but nothing beats 5:15checking the preview window and there we 5:17have it a fullcreen hero section no 5:19matter what the height of the viewport 5:21viewport sizing is perfect for fullcreen 5:23sections just like this one or any 5:26elements that need to resize to 5:28accommodate different Siz browser 5:30windows and devices once again we've 5:33covered a lot in this lesson but give 5:36yourself a pat on the back because at 5:37this point in the course you've learned 5:39all of the sizing and positioning modes 5:42let's recap for positioning modes we 5:44have absolute where we can freely 5:47position layers in relation to their 5:49parent frame relative where the position 5:52is determined by the flow of content in 5:54a stack or grid fixed where the position 5:58of a layer is fixed relative to the 6:00viewport and sticky where a layer 6:03switches from relative to fixed when it 6:05hits the top of the viewport then back 6:07to relative when it hits the bottom of 6:09its parent frame and for sizing we have 6:13fixed to set a specific pixel size for a 6:16layer to remain at relative to set a 6:19layer to a percentage of the size of its 6:21parent fill to determine what fraction 6:24of the available space a layer should 6:25fill within a stack or grid fit content 6:29to keep a parent frame snug down around 6:31its relative position child layers and 6:33viewport to set the height of a layer to 6:36fill a percentage of the height of the 6:37viewer's browser window or display 6:39viewport the more you experiment with 6:41these Core Concepts the more comfortable 6:43you'll become so revisit the lessons in 6:46this chapter remember it's perfectly 6:48okay to stumble along the way take your 6:51time and enjoy the process I'll see you 6:53in the next one

TeachesSizing

Also coversAbsolute Positioning Frames Grids Responsive Design Stacks Sticky & Fixed

Watch on YouTube ↗

‹ Framer Update: Assets with Folders

Analytics in Framer (Fundamentals Lesson 30) ›

More in this topic

8 Framer shortcuts you're probably sleeping on

8 Framer shortcuts you're probably sleeping on

Layout & Design3K views · 2 months ago

Framer Update: Stack Sorting and Bento Grids

Framer Update: Stack Sorting and Bento Grids

Framer Update7K views · 2 months ago

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Layout & Design1K views · 3 months ago

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Layout & Design2K views · 3 months ago

Animating Vectors in Framer (Vectors Lesson 5)

Animating Vectors in Framer (Vectors Lesson 5)

Layout & Design4K views · 3 months ago

Customizing Vectors with Variables in Framer (Vectors Lesson 4)

Customizing Vectors with Variables in Framer (Vectors Lesson 4)

Layout & Design3K views · 3 months ago

Replace component instances site-wide in Framer

Replace component instances site-wide in Framer

Layout & Design4K views · 4 months ago

Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)

Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)

Layout & Design3K views · 4 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.