Layout & Design

Min and Max Sizing in Framer (Fundamentals Lesson 11)

Joseph

8:26

34K views

Dec 19, 2024

About this lesson

When we use flexible sizing modes like fill or relative, we run the risk of things being stretched or squashed to such a degree that things get a bit… well… ugly.

This is where Min and Max values come in — allowing us to enforce some limits to how big or small things can get — to keep things fluid… but contained.

Let’s spend some time getting more familiar with the mechanics of min and max and look at some examples of when it saves the day.

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

https://www.youtube.com/watch?v=NJKKqYbYeVE&t=11s Why min and max values matter

https://www.youtube.com/watch?v=NJKKqYbYeVE&t=30s Understanding min and max sizing

https://www.youtube.com/watch?v=NJKKqYbYeVE&t=96s Example: min width for responsive cards

https://www.youtube.com/watch?v=NJKKqYbYeVE&t=189s Using max width to prevent overly wide layouts

https://www.youtube.com/watch?v=NJKKqYbYeVE&t=291s Min height for viewport-sized sections

https://www.youtube.com/watch?v=NJKKqYbYeVE&t=386s Max height for text boxes

https://www.youtube.com/watch?v=NJKKqYbYeVE&t=478s 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:00when we use flexible sizing modes like 0:01fill or relative we run the risk of 0:04things being stretched or squashed to 0:06such a degree that things get a bit well 0:10ugly this is where Min and Max values 0:13come in allowing us to enforce some 0:15limits to how big or small things can 0:17get to keep things fluid but contained 0:21let's spend some time getting more 0:22familiar with the mechanics of Min and 0:23Max and look at some examples of when it 0:25saves the day 0:27[Music]0:30in the simplest terms Min for minimum 0:33means don't get smaller than and Max for 0:36maximum means don't get bigger than 0:39setting a minimum size props up the 0:41inside of our frame making sure it won't 0:43shrink below a certain point this is 0:45useful when we want an element to 0:47maintain legibility or structure even as 0:49the screen gets smaller preventing 0:51things from being completely squashed 0:54setting a maximum size on the other hand 0:56boxes in the outside of our frame 0:58ensuring that it won't continue to 1:00expand Beyond a certain point keeping 1:02the layout tidy and contained without 1:05getting stretched into Oblivion by 1:07default the actual Min and Max height 1:09and width Fields don't show up on the 1:11properties panel until we click to add 1:12them if and when we need them we can set 1:15these fields to either fix sizing using 1:18exact pixels or relative sizing using 1:21percentages giving us some flexibility 1:23depending on our needs a good rule of 1:25thumb is that if a dimension is flexible 1:27then the Min or Max would be fixed 1:30and if the dimension is fixed the Min or 1:32Max would be flexible which I'll show 1:34you an example of here in a bit let's 1:37start with an example of when Min and 1:39Max WID might come in handy on this page 1:42we have a feature section with a set of 1:44cards and a horizontal stack that wraps 1:47to another row when it runs out of space 1:50the width of each card is a fixed 280 1:52pixels so if I give them a bit more 1:54space as soon as another card is able to 1:57fit it will and naturally when there's 2:00less space the last item that doesn't 2:02fit has to wrap to the next row but in 2:05between we've got some wasted space like 2:08I said these cards are a fixed width of 2:10280 pixels which means anywhere between 2:13an extra one and an extra 279 pixels 2:17still can't fit the next card such as 2:20the nature of fixed sizes not so 2:22flexible so what if we take all of these 2:25cards and set their with to fill instead 2:29well that ain't great there's nothing 2:31stopping these cards from getting as 2:32narrow as they need to be to fit on a 2:34single row this is where Min width comes 2:37in since we don't want these cards to 2:39ever get less than the 280 pixels wide 2:42they were before we can add a Min width 2:46and set that to 280 pixels now since 2:49they can't get more narrow than 280 2:51pixels they'll wrap very similarly to 2:54the way they did originally except now 2:56fill sizing is able to expand to occupy 2:59that available space so now we get the 3:01best of both worlds flexibility with 3:04constraints there's still one other 3:06issue and this is an extremely common 3:08one as this breakpoint gets wider and 3:11wider which will happen on large 4K or 3:145K desktop displays things can get 3:16impractically wide this block of text is 3:19becoming one super long line there are 3:22too many cards to a row and a card that 3:24gets its own row is absolutely massive 3:27if we set the section to a fixed width 3:29will lose all that great flexibility you 3:32might be thinking I get it just add a 3:34Max width to the section but sometimes 3:36the section will have a background color 3:38or an image or even a video that we want 3:41to fill the entire width of the browser 3:43even though we want the content to stop 3:45growing so a better practice would be to 3:48wrap this content in a container of its 3:50own to do that I'll select the children 3:52of the section rightclick and choose add 3:56stack this wraps a new frame around our 3:59selection adds a stack layout sets the 4:01width to fill and the height to fit all 4:04in one step I'll just fix this Gap real 4:07quick and now we can add a Max width to 4:10this container if I want the max width 4:12of this Frame to be the width I'm 4:14currently seeing on the canvas I can 4:16cheat a little bit and switch the size 4:17to fixed to see how wide it actually is 4:20at the moment I'll take a mental note 4:22that this is 880 hit undo then type 880 4:26pixels for my Max width now when this 4:29breakpoint gets smaller we have all the 4:31benefits of the fluid layout that we had 4:33before but when things get wider the 4:35content frame stops growing when it hits 4:38880 pixels so things never get out of 4:40control an alternative approach to this 4:43that allows for some additional freedom 4:44on the canvas would be to use a fixed 4:46width which we can now freely and 4:49Visually size the way we like it then to 4:51constrain it we can switch our maxwidth 4:54to relative and set it to 4:57100% now I can continue to play with the 4:59w of this on the canvas and it can't get 5:01any wider than its parent frame and when 5:04I preview we have our Fram starting off 5:06at exactly the size we want and then we 5:09still have that responsive behavior of 5:11it flexing to get no wider than 100% of 5:14its parent frame now let's look at some 5:17examples of Min and Max height here we 5:21have a hero section with a viewport 5:22height of 100 VH which means it'll fill 5:25the height of the browser's viewport no 5:27matter how tall it gets but fortunately 5:30also how short it 5:32gets in the preview window I can squash 5:35the height of the viewport down until I 5:37reach a point where things at the top 5:38get clipped because this content is 5:40vertically centered in the stack the 5:43stuff below is fine because we can 5:45scroll down but scrolling up never 5:47reaches the top of the Overflow at the 5:50top of the preview window we can 5:51actually see that here around 520 pixels 5:55is about as low as we can go before 5:57things get bad so mental note 6:00520 back on the canvas I can select the 6:02hero section frame that's set to fill 6:04100% of the viewport and click here to 6:06add a Min height I'll set it to 520 so 6:10it can't get less tall than what we saw 6:12looked okay in preview mode and when we 6:15preview again there we have it the 6:17height essentially goes from filling the 6:19viewport to becoming fixed at 520 pixels 6:23preventing the frame from clipping its 6:25content now let's look at a case where 6:27we have a text box with a excerpt and a 6:30read more button the text box fills the 6:33width of its parent and fits the height 6:35of its content the text itself if the 6:38text box gets more narrow the text just 6:40keeps getting taller and taller and 6:42taller until eventually it's 6:44impractically tall and might mess with 6:46the rest of my layout but what if I 6:48don't want it to get longer than four 6:50lines of text for example no matter how 6:52much text we start with and no matter 6:54how narrow its container gets that's a 6:56job for Max height I'll select the text 6:59box itself add a Max height set it to 7:03fixed and set a value of 96 pixels why 7:0796 here's a little math trick to work 7:09out the max height to fit a specific 7:11number of lines of text just multiply 7:15the number of lines of text by the text 7:17size and then again by the line height 7:20so four lines of text time 16 * 1.4 7:25equal 96 done deal now since this text 7:28is being cut off off in an arbitrary 7:30place I'm going to make it fade out at 7:32the bottom to make it more clear that 7:34it's just a partial excerpt of text I'll 7:37click the plus icon next to Styles 7:39choose mask then just rotate it around 7:42the other way and make it a little less 7:45tall there we go now we've got a text 7:48box that still fits the height of the 7:50text but only until it reaches that Max 7:53height of 96 pixels which perfectly fits 7:56four lines of text now you've got an 7:58idea of we can use Min and Max for 8:01height and width to allow us to combine 8:03fixed and fluid behaviors which gives us 8:06the flexibility to maintain control of 8:07our layouts no matter how parent frames 8:10and viewports flex that's it for this 8:12one I'll see you in the next one

TeachesMin & Max Sizing

Also coversBreakpoints Frames Responsive Design Sizing Stacks

Watch on YouTube ↗

‹ Adding Images, Videos, and Text in Framer (Fundamentals Lesson 12)

Framer Update: Assets with Folders ›