What is Fixed, Relative, Fill and Fit Content in Framer?

in this video I'm going to show you the difference or rather I'm going to try and explain to you different types of heights and different types of widths in framer what we're going to do here is basically I'm going to explain to you what is fixed height and width and what does it mean to have relative height and width what does it mean to have Field height and width what does it mean to have f feet is now feet height and width and what does it mean to have viewport height notice there's no viewport width

there's only viewport height because viewport is basically okay it's what I'm going to explain but just know there's no viewport with and finally as a bonus I'm going to explain to you what it means to Overflow what what is this St called overflow my name is Je and this is fra dive let's get [Music] started the first step we're going to look at is fixed height and width which is uh fairly you know it's fairly clear and uh I think this is the easiest part so the fixed height and width and I'm going to do

that by drawing something and just quickly illustrating what is fixed height so when you hold F on your keyboard you can now draw a frame inside your your sections so then let's imagine this is my blank piece of paper which let's call it this is a blue paper okay so then to easily to demonstrate I'm going to draw a frame inside this paper or I'm going to draw like a square rectangle I'm going to hold F on my keyboard and I'm going to draw it here now as you can see we've drawn a rectangle by

holding F or you can just click uh or you can just click here on top of your uh yeah you can just click here and you can see frame here and you can just click it and once you click frame you can just come here and draw your frame okay so let's delete that and let's go back to where we are so hold F on your keyboard and then you draw your fast frame so let's call this blue part let's call it our blue paper Okay so so let's imagine now this is a frame so

this Frame is what I'm going to use to explain so this is this is this is a rectangle inside this Frame so this rectangle or this frame has fixed with and you need to realize anything that is fixed it has four dots at every corner or at each Edge so you see there's a there's a DOT or rather there's a small circle here you can see it and then there's also a small circle there there's also a small circle there and there's a small circle and then when we view the width we can see it's

385 and the height is 253 and on the right side you can see this is fixed and fixed so the default in framer when you're drawing any frame is always going to be in fixed position okay now let's go now what what exactly now is relative height and width so again I'm going to come here and draw a frame just like that again this is our blue paper so let's just call it the BP and inside our blue paper I'm going to try to explain to you what is relative height and relative width so again

when we draw a frame inside here again holding a frame is hold F uh sorry drawing a frame you hold F on your keyboard and just draw it like that so then as you can see uh we have on the right side we can see it is 360 1 and 227 and this normally this relative relative um you know we wanted to be relative so when we come and click here we can see that we have the relative options so once we click that notice what happens okay so again once we click it it changes

from you know it changes from 337 to 52% so what relative means is that it will take 52% of the parent layer and in this case this Frame which is highlighted here the parent the parent layer or rather the layer that is just above it is this so this is our parent our parent frame so when we say something is 52% relative it means that it is 52% of this height okay so for example now when we take this BP it has a height of 642 so when we take 52% of 642 it gives us

this with okay and the same happens to the height so when we come here and click relative it is 55% okay so what happens when we put 100% when we put here 100 % you can see that it takes 100% or rather of the height of the BP so if I come here and just drag it inside you can see that the height of the BP which is our parent layer is 100% similar to this and this is another interesting part you might ask yourself why should we just use you know instead of relative let's

use fixed here okay but let me show you so if you want to use relative and it's 100% if we are to change the height of the BP or blue paper and adjust it see what happens okay as we adjust the height you can see that the frame also adjust with the BP okay this is the interesting thing about relative so it just goes along with it so rather like if this was fixed it would if we increase the BP or blue paper nothing will happen you see it will just increase and the frame will

just remain the same height so that's the thing that's the difference between relative and fixed height which applies to relative width as well okay so now let's go to what it means to have a field height and width so again I'm going to explain it using drawing a frame again I'm holding F on my keyboard and then inside this Frame let's again let's call the are blue paper and we've said BP is blue paper so inside this blue paper I'm going to draw a frame or rather let's this time I'm going to draw a square

okay something like a square you can see like um around 161 okay so it's 161 161 so this is a perfect square okay so now in this Square we want it to uh if you can see again the default is usually fixed and fixed next so what happens if we want this to be fill height so we come to the WID here and click this drop- down menu and then when we go to feel we can't really click it it's sort of like locked you see so I can't click feel however much I try then

you ask yourself why can't you click feel there has to be something wrong not really what happens is we go again back to our parent layer or rather our BP so the BP is this one okay so for field work and this is something I want you to get very clearly for any field to work your parent layer or your parent frame has to be has to have something what we call a layout or rather it has to be a stock so if we want this to work F we need to change the be PP

into a layout so if you come here and click just below the size there's also a plus button here so we just come here and click this plus button and you can see all of a sudden notice this uh this two sort of two lines here so when I remove the layout it goes back to like a square so when I add the plus it becomes two sort of like two two lines so now we've added a layout to RBP now when we come back to our frame let's see if we can turn it to

a field withd okay so click on the WID and voila f is there so we can now click F and see what happens it takes it fills the whole Space if we go back again just demonstrate it again if I click f it fills the space and notice something um feel this is a key factor feel usually doesn't have any dot inside okay on the on the right side but now as you can see this one has two dots so on the top and the bottom it has two dots because this is a fixed this

is fixed height okay so if we want to change this into F then these dots will disappear let me show you so if I come here and click F the dots disappear so this is just a visual indicator to show you that you're in F or you're in fixed so if we return to fixed again you can see the dots are back there okay so that's the difference between fixed and you know that's the difference between fixed and feel in a nutshell but I hope you understand what it means to have feel so always remember

that when you have feel your parent layer has to have a layout and the layout is indicated by these two lines okay so let's now go back to feet okay so what exactly is feet height and feet width so again I'm going to draw another BP here or our blue paper and then I'm going to name it BP just for understanding then inside the BP I'm going to draw now our rectangle just for us to understand what it means to have feet height and width so again let's go to our frame let's click here on

the width and we can see Feit content again there's no Feit content and if we try Fe height there is no feet height and we have another problem again there's a trick here how can we activate feet content so you need to ask yourself this Frame we want it to fit content but in real sense it doesn't have any content as you can see there's nothing inside this blue paper this is just nothing okay but let's say we want to add something inside it let's say we want to draw another frame inside it okay now

it has a frame inside right or rather a square so now if I come now to my frame this this one okay and I want it to feed the whe let's see what we have so I come here to the whe and as you can see feet content now works if I click it see what happens the be changes from 294 and I want you to see what happens voila it is now changed to automatic and the WID has decreased to this size essentially it has it is now fitting the content or rather the square

or this Frame which is inside it and the same thing happens to the height again if I click here I can click fit content and voila now we now our stock has fit in the content of um that is inside it again we don't have to we don't really have to have this as uh as the content we can also have a text inside so let's now hold our blue paper and inside the blue paper let's hold t on our keyboard or you can come in and click T and then here you can just type

hey okay so notice now we have two type of content we have this content and we have this content see what happens when we click frame here which is our frame and we want the height to fit the content okay we want this height to not be fixed as you you can see is 192 we want it to fit the content so I click here fit content and you can see now it has fit the content inside the page and we can do the same for the we and fit the content perfectly okay so that

is fit content I hope you understood what fit content is or fit height and width let's go now to the final setting of the view of the height so here we have something called the viewport height if you click here on your height you have something called a viewport Okay so we've talked about fixed we've talked about relative F feet now we have something this something called viewport let me explain to you what viewport is so if I draw another frame here okay and I wanted to and I this is now blue paper again let's

let's name it our blue paper so now I want to draw another frame again remember how drain a frame is f on your keyboard so I want this to to you know have a viewport height okay so I just come here and click here height and you can see viewport height works so I can click viewp put height and notice what happens our frame takes a whole height from here all the way to here because essentially your viewport is this part as you can see from here from this top blue part till here is usually

is the viewport so the viewport is essentially what you see when you view your screen so if I if I click um if I click here on let me let me first do something so I need to S this parent layer into overflow visible so you guys can see don't worry if we don't understand about overflow visible but I just explain it in the next section so if I click you know uh this View and I come all the way to my viewport okay as you can see this uh rectangle that we just drawn now

takes our viewport our viewport is what we can see and what we can see is from this part to this part so we've instructed this rectangle to fill the viewp put to fill the height of the viewp put that is basically what the viewport is okay so now let's go to what we understand by overflow okay so I'm just going to copy this I'm going to copy this and I'm going to paste it here just to explain what overflow is so when we come here to our BP which is our blue paper and we can

see here we have a setting called overflow so this overflow means just something that goes above or overflows or goes you know if you can see the BP it has a height of 698 okay but now when we come now to our frame which is the content inside it we can put it at 800 and let's let's just draw it uh let's just make it smaller okay so as you can see the height here is 188 and the height of our blue paper is 698 so of course 698 is bigger but what happens if we

want the frame or this Frame to be bigger or rather the height to be much bigger if I increase the height as you can see we can see the Overflow we can see the Overflow because now it is going off outside this blue paper notice if I go to the blue paper and I I turn this overflow to Hidden it's now hidden we cannot see what is overflowing outside the blue paper and that's it I hope you've learned something if you wish to practice this by yourself I will link the remix file in the description

if you have any question just ask in the comments and I will reply as soon as possible thank you for watching once again this is FMA dive and see you in the next video [Music]