5. min width and max width - Responsive CSS Tutorial

Key Takeaways

we've got our layout working it's looking nice and Danny but it's getting too big now when we're getting up to these big sizes we don't want that to happen what we can do to do that is a new property we're not worrying about a new value right now we're thinking of a new property it works with the width and you probably saw the name of this lesson was minute and maxed with so we can actually set a width and a maximum or minimum width on an element as well so I'm gonna come and put that border back on here of two pixels solid magenta just so we can really see what's happening once again and let's come and give this we have a width of 90 percent but I'm also going to give it a max width of 600 pixels let's do 620 because that was our original design so we'll stick with the 620 that we originally had so now if we come and take a look at this and I refresh you're gonna see it's it's working at our small screen sizes our container is growing it's staying at 90 percent but at one point it's gonna get locked into play and right around here it stops growing because it's hit its maximum width and that means at large screen size is my text and line lengths aren't going to get too long but at small screens everything works nice and perfectly so we've sort of got the best of both worlds going now we can set a set value for the maximum size we want where we can keep a percentage to let it shrink when we want it to we can also set a min width so if I came on here and said min width I'm gonna set it pretty big of 500 pixels I wouldn't normally do this on a container but just for demonstration purposes we have our max so it's never gonna grow bigger than 620 and if I go this way it will never get smaller than 500 so when I hit 500 pixels you can see it stops and then I get side scrolling again which is why I wouldn't set a min width on my container but it does demonstrate how that property works so for now I'm gonna take this off I just wanted to introduce the idea of the minimum width in there but for the max width I will leave it on there when we're starting to think respond responsively for the container this is a really really common property to set on something to give a maximum size that size really depends on the layout and what you're building so I'm not gonna say that there's a specific max size that you should be going you will base it on the design that you're doing I will be going warned of some best practices for total lengths and total sizes in a little bit interestingly enough if you put your max width above your width it's still going to work because there are two different values max width and width are two different ones same with min width you can put them in any order in your CSS and it won't have an effect it's going to work no matter what so play around with them see if you can get used to it or figure it out if it's something that you're finding a little bit confusing don't stress about it too much we're gonna be using these a lot in the following projects that we're going to be building it's just going to help reinforce it the more we use it so you'll get the hang of it in no time