Coding

CSS – Box Sizing | Beginner’s Course | #10

  • 00:00:01 hello and welcome back to another video
  • 00:00:03 of our beginner's guide the good news is
  • 00:00:06 that we are coming closer to the end of
  • 00:00:08 the CSS part of our beginner's guide but
  • 00:00:11 there are still some more topics that we
  • 00:00:14 should talk about and one of these
  • 00:00:16 topics is box sizing a really important
  • 00:00:19 concept in CSS because we have to
  • 00:00:22 understand what it actually means if we
  • 00:00:24 apply a width or a height to a specific
  • 00:00:27 element for example and how this is
  • 00:00:29 actually calculated let's have a look at
  • 00:00:32 that in this video
  • 00:00:36 so how can we understand box-sizing or
  • 00:00:39 the basic concepts behind it well we'll
  • 00:00:42 have a look at our website of course our
  • 00:00:45 course project or video serious project
  • 00:00:47 as I would call it and this works quite
  • 00:00:50 well so far but maybe we can get some
  • 00:00:52 knowledge in this video which we can add
  • 00:00:54 to this side to make it work even better
  • 00:00:56 and we'll also have a look at this site
  • 00:00:59 right here this is basically another
  • 00:01:01 example project which should just help
  • 00:01:03 us to get an idea of what happens if we
  • 00:01:06 change a specific property or a specific
  • 00:01:09 value as always you can find a link to
  • 00:01:12 the code in the video description now
  • 00:01:15 how do we start though how can we get an
  • 00:01:17 idea about box-sizing well as you can
  • 00:01:20 imagine I think it makes sense to have a
  • 00:01:22 look at some theory first because what
  • 00:01:25 is box-sizing actually well let's think
  • 00:01:28 about the following situation we have an
  • 00:01:30 element for example and we know the box
  • 00:01:33 model in CSS we talked about that front
  • 00:01:35 is serious so make sure to have a look
  • 00:01:37 at this video if you don't know how the
  • 00:01:39 box model works and the box model has a
  • 00:01:42 content and for this content we can
  • 00:01:45 define right here the box height and
  • 00:01:48 this content also has a width and
  • 00:01:50 therefore we can define the box with now
  • 00:01:54 the interesting thing is that whenever
  • 00:01:57 we specify a width for example let's say
  • 00:02:00 one of the pixels these 100 pixels refer
  • 00:02:04 to the content and what's the reason for
  • 00:02:06 that well the reason for that is that
  • 00:02:09 the standard declaration that works for
  • 00:02:12 the box sizing is this one it's box
  • 00:02:14 sizing that's the property content box
  • 00:02:17 and that's the value that is applied and
  • 00:02:20 this simply tells us that whenever we
  • 00:02:22 apply as I just said a width for example
  • 00:02:25 of 100 pixels that the content of our
  • 00:02:29 box should be 100 pixels wide so that's
  • 00:02:32 the first thing you have to understand
  • 00:02:34 normally if you don't change a thing
  • 00:02:36 width or height always refer to the
  • 00:02:38 content of our box model but we have
  • 00:02:42 more actually right because we also have
  • 00:02:44 a padding and a border we also have a
  • 00:02:48 margin but that is not
  • 00:02:50 but here the thing now is that you could
  • 00:02:53 say hey i define a width for my element
  • 00:02:56 for example let's again say 100 pixels
  • 00:02:59 and I want to make sure that my element
  • 00:03:01 so basically my content my padding and
  • 00:03:03 my border in total is only 100 pixels
  • 00:03:07 wide then now the problem is that with
  • 00:03:10 the normal standard setting so
  • 00:03:12 box-sizing content box this doesn't work
  • 00:03:15 because we saw that the width and height
  • 00:03:17 properties always refer to the content
  • 00:03:20 only the good thing is that if you want
  • 00:03:22 to change it so if you want to say that
  • 00:03:24 this should be pure boxwood and that
  • 00:03:27 this should be your box height well this
  • 00:03:29 can be changed by simply adding this
  • 00:03:32 declaration so you don't write
  • 00:03:34 box-sizing content box or nothing at all
  • 00:03:37 because as I said content box is the
  • 00:03:39 standard but you simply add the border
  • 00:03:42 box value to the box sizing property and
  • 00:03:44 because of that you will have the
  • 00:03:46 behavior we can see right here and with
  • 00:03:50 that we have the theory of that first
  • 00:03:53 concept that we have to understand so
  • 00:03:55 let's go to our example website and see
  • 00:03:58 how this actually works so that's the
  • 00:04:01 example project we can see we have
  • 00:04:03 different elements right here let's have
  • 00:04:06 a look right there my beam I created
  • 00:04:08 some nested elements so the nested
  • 00:04:12 element right here is the cond and so
  • 00:04:14 that's the element we have a in the
  • 00:04:16 middle right there then we have another
  • 00:04:18 nested element which I called nested
  • 00:04:21 like a 50 class nested then we have the
  • 00:04:24 element navigation then we have the body
  • 00:04:26 which you can see right here and we have
  • 00:04:29 of course HTML that's the basic concept
  • 00:04:31 that we have as I said it's not really a
  • 00:04:34 website right here it's just to make
  • 00:04:36 sure that we understand what we just
  • 00:04:38 talked about if we change to our code we
  • 00:04:41 can see in the index.html file but
  • 00:04:43 that's basically the structure we just
  • 00:04:45 talked about we have body we have the
  • 00:04:47 first Nestor element the second master
  • 00:04:49 element and the third nested element and
  • 00:04:51 we have a CSS file as in the other
  • 00:04:54 videos I only applied some general
  • 00:04:57 properties to make sure that our website
  • 00:04:59 well looks like that the important thing
  • 00:05:03 now is that if we go down
  • 00:05:04 right here to content so to our content
  • 00:05:07 class right here so basically this
  • 00:05:10 element nested inside that we could not
  • 00:05:13 play around with the width and with the
  • 00:05:16 box sizing I mostly will refer to the
  • 00:05:20 width in this video but of course you
  • 00:05:23 can also change the height of an element
  • 00:05:25 but which is easier to show and I think
  • 00:05:27 it's the better example for you to
  • 00:05:29 really see what happens therefore will
  • 00:05:31 mostly stick to width
  • 00:05:32 now as I talked about with let's add a
  • 00:05:35 width maybe let's say this should be 200
  • 00:05:38 pixels and let's save that and if we now
  • 00:05:41 go back we see that in the beginning it
  • 00:05:43 was just a normal block level element
  • 00:05:45 and if we now reload the page we can see
  • 00:05:48 that our box size decreased and now you
  • 00:05:51 might say well of course it decreased
  • 00:05:53 because we specified a width of 200
  • 00:05:56 pixels but if we inspect that right here
  • 00:06:00 then you can see something interesting
  • 00:06:03 because we can read that the width of
  • 00:06:06 our box actually is not 200 pixels it's
  • 00:06:10 210 pixels you can see it right here and
  • 00:06:13 the reason is that if we go back that we
  • 00:06:16 have this width of 200 applied but only
  • 00:06:21 to our content because as we just talked
  • 00:06:23 about in the theory part the default box
  • 00:06:26 sizing value applied is content box and
  • 00:06:29 therefore if we go back to the code and
  • 00:06:32 now select the element right here we can
  • 00:06:36 see that right here down in the lower
  • 00:06:38 right part of the screen you can see
  • 00:06:40 that 200 is indeed applied but
  • 00:06:43 additionally we have a border of 5
  • 00:06:47 pixels and we talk about the width only
  • 00:06:49 soit's 5 pixels to the left 5 pixels to
  • 00:06:52 the right and therefore well we can see
  • 00:06:54 that our box now has a width of 210
  • 00:06:59 pixels now if you think back about the
  • 00:07:01 slides again we saw that we can change
  • 00:07:04 this behavior and make sure that our box
  • 00:07:07 on by that our element only has the
  • 00:07:10 width that we specify now to do that we
  • 00:07:13 can go back right here and simply add
  • 00:07:16 box-sizing like
  • 00:07:18 and now you already see the options
  • 00:07:20 right here in Visual Studio code we will
  • 00:07:23 now use border box like that and if we
  • 00:07:26 now go back to the page and reload it
  • 00:07:29 then we cannot see that something
  • 00:07:32 happened but if we inspect it we can now
  • 00:07:35 see that the size or the width of our
  • 00:07:38 entire element now is exactly 200 pixels
  • 00:07:42 we can again check that right here
  • 00:07:44 because now we see that CSS
  • 00:07:47 automatically reduced the width of our
  • 00:07:49 content to make sure that it can include
  • 00:07:52 d5 pixels to the left anti 5 pixels to
  • 00:07:55 the right that we saw or that we defined
  • 00:07:58 for our border so that's the first
  • 00:08:01 important concept you have to understand
  • 00:08:02 when you talk about box-sizing how this
  • 00:08:05 box sizing works and what's the
  • 00:08:06 difference between content box and
  • 00:08:09 border box however if we now go back to
  • 00:08:12 our code and maybe leave the border box
  • 00:08:14 for now that's ok and now say that our
  • 00:08:17 width should not be 200 pixels but maybe
  • 00:08:21 50% and safe that we applied that
  • 00:08:25 percentage value already in our project
  • 00:08:27 by the way well what's happening now
  • 00:08:29 because if we go back to the page and
  • 00:08:31 reload it now we can see that the box
  • 00:08:35 size changed we now have 200 6.5 pixels
  • 00:08:38 as a width for our element right here
  • 00:08:40 and now you might ask yourself what do
  • 00:08:44 these 50% of width refer to and for that
  • 00:08:47 it's again time to go back to the slides
  • 00:08:50 and have a look at the theory behind it
  • 00:08:52 because the question is how is the box
  • 00:08:55 size calculated and our situation is
  • 00:08:58 kind of as the following we have a
  • 00:09:00 definitive one right here and this stiff
  • 00:09:03 one is nested inside of a narrative and
  • 00:09:06 another div and if but that doesn't make
  • 00:09:09 a difference right here to get the basic
  • 00:09:11 problem or the basic concept that we
  • 00:09:13 have to think about because now the
  • 00:09:15 question is this one right here
  • 00:09:17 what is our box height and we saw that
  • 00:09:20 we can define that by pixels or by
  • 00:09:22 percentages and we have the box width we
  • 00:09:26 can of course also define that using
  • 00:09:28 pixels or percentage values and one
  • 00:09:31 important information
  • 00:09:32 right here there are more values
  • 00:09:34 available than pixels and percentages
  • 00:09:36 but for this video and to get the basic
  • 00:09:39 concept I think these two values are the
  • 00:09:41 best ones we can use to make sure you
  • 00:09:43 get an easy a nice overview of the way
  • 00:09:46 the box size is calculated
  • 00:09:48 therefore we talked about pixels already
  • 00:09:51 so we don't have to focus onto this
  • 00:09:53 right now but will solely focus onto the
  • 00:09:56 percentage calculation as we just saw it
  • 00:09:58 in our example now that's the issue
  • 00:10:00 right how is this percentage now
  • 00:10:03 calculated what's the reference point
  • 00:10:05 for this 50% width that we just applied
  • 00:10:08 unfortunately the answer is not a single
  • 00:10:11 one as sometimes in CSS the answer is it
  • 00:10:15 depends and what does it depend on well
  • 00:10:18 I thought that free rules to remember
  • 00:10:20 would be a good name for the following
  • 00:10:22 slide because right here we'll have a
  • 00:10:25 look at three different swell situations
  • 00:10:27 and how the size of our box depends on
  • 00:10:31 something we'll talk about that
  • 00:10:32 something of course and if you keep that
  • 00:10:35 in mind I think you really got the solid
  • 00:10:37 knowledge you need to really work with
  • 00:10:39 that however there are two disclaimers
  • 00:10:42 that I would like to make right here
  • 00:10:43 the first disclaimer is that as always
  • 00:10:46 in life there are not only these free
  • 00:10:49 rules there are some additional rules
  • 00:10:52 that you might consider in specific
  • 00:10:53 cases when you want to change the size
  • 00:10:56 of your box so I will not talk about the
  • 00:10:58 details regarding that right here
  • 00:11:00 because as I said with the free rules we
  • 00:11:02 talked about you really have two solid
  • 00:11:04 basic knowledge that you need the second
  • 00:11:06 disclaimer is that from now on I'll only
  • 00:11:09 talk about the width when I talk about
  • 00:11:11 changing the size of our box the most
  • 00:11:14 concepts we talk about right here are
  • 00:11:16 also true for the height but I simply
  • 00:11:19 think that working with the width makes
  • 00:11:21 it easier for us to understand the
  • 00:11:23 concepts therefore I stick to it so now
  • 00:11:26 that we talked about these disclaimers
  • 00:11:28 let's have a look at the free rules to
  • 00:11:30 remember because the starting point is
  • 00:11:32 actually the following we have an
  • 00:11:34 element and this element could be nested
  • 00:11:37 inside of other elements now how can we
  • 00:11:40 now specify what the 50% width that's
  • 00:11:45 what we want to apply
  • 00:11:46 right here depend on so what's the value
  • 00:11:48 we have to use 50% from the answer is
  • 00:11:52 well it depends and the first thing it
  • 00:11:55 depends on is the position property
  • 00:11:58 applied to this element now you might
  • 00:12:00 say positioning we talked about that
  • 00:12:03 right yes we did we talked about
  • 00:12:05 positioning to well position the
  • 00:12:07 elements on our page
  • 00:12:08 but position also has an impact on the
  • 00:12:11 size of our elements now let's have a
  • 00:12:14 look at a first easy example to get an
  • 00:12:17 idea of how this could work because we
  • 00:12:20 could say that this element has the
  • 00:12:22 following declaration applied position
  • 00:12:24 fixed now if that's the case and we use
  • 00:12:28 a word for 50% then the 50% is simply
  • 00:12:33 calculated by using 50% of the viewport
  • 00:12:38 so basically of what you can see on your
  • 00:12:41 screen and that's another important
  • 00:12:44 thing you have to understand you have
  • 00:12:45 the element where you want to change the
  • 00:12:47 width in our case and there the position
  • 00:12:50 property is important but then you also
  • 00:12:52 have the viewport in our case and this
  • 00:12:55 is the so called containing block so the
  • 00:12:57 containing block simply means that the
  • 00:13:00 size of the element we want to change
  • 00:13:02 the width for no example depends on this
  • 00:13:05 containing block and the containing
  • 00:13:07 block in our case or in the case of
  • 00:13:09 position fixed being applied to the
  • 00:13:11 element is the viewport now I know that
  • 00:13:14 this can be quite confusing and we'll
  • 00:13:17 have two more examples you see how this
  • 00:13:19 works the worries but I think now is a
  • 00:13:22 good point in time to jump back to our
  • 00:13:24 example project and simply do that so
  • 00:13:26 apply position fix to our element and
  • 00:13:28 see how it's calculated so let's go back
  • 00:13:31 send back right here and working here in
  • 00:13:34 the content selector and now I simply
  • 00:13:37 add position fix as we just talked about
  • 00:13:41 so that's the element we're going to
  • 00:13:44 change the width for to 50% now let's go
  • 00:13:47 back to the code and reload the page and
  • 00:13:50 now you can see that our element is kind
  • 00:13:53 of in the middle of nowhere
  • 00:13:54 that's simply due to the fact that we
  • 00:13:56 applied position fixed so let's add
  • 00:13:59 left:0 right here and go back if we now
  • 00:14:03 reload the page yeah we can see it's at
  • 00:14:05 least a little bit better positioned so
  • 00:14:08 now we can see that this element has a
  • 00:14:10 width of 310 pixels and our viewport so
  • 00:14:15 what we can see right here has a width
  • 00:14:17 of 620 pixels so our element has exactly
  • 00:14:21 a width of 50% of the viewport now you
  • 00:14:25 might say well that's not the viewport
  • 00:14:27 that's just the HTML element and you're
  • 00:14:30 totally right
  • 00:14:30 but if you now keep in mind the 310
  • 00:14:34 pixels and we now go back to our code
  • 00:14:36 and increase the width of the HTML
  • 00:14:40 element to maybe 2,000 pixels like that
  • 00:14:43 and save that and go back and now reload
  • 00:14:46 the page you can now see that our
  • 00:14:48 element still has a width of 310 pixels
  • 00:14:52 because well the viewport didn't change
  • 00:14:54 but the HTML element
  • 00:14:55 well this now has a width of 2020 pixels
  • 00:14:59 including some heading right here that's
  • 00:15:02 what we have 2020 the important thing is
  • 00:15:05 that if I now increase the viewport
  • 00:15:07 right here our element also increases
  • 00:15:09 too well 50% of the width of the
  • 00:15:13 viewport so that's the first important
  • 00:15:15 rule you can remember if you apply
  • 00:15:17 position:fixed your element then the
  • 00:15:19 so-called containing block so simply the
  • 00:15:22 well element your size depends on is the
  • 00:15:26 viewport now if we go back right here
  • 00:15:29 and maybe delete with 2000 pixels like
  • 00:15:31 that because I don't think we need that
  • 00:15:33 then you can say okay I understand that
  • 00:15:35 but we have more values that we can
  • 00:15:38 apply to the position property and
  • 00:15:40 you're totally right so let's have a
  • 00:15:42 look at another example in theory first
  • 00:15:44 back on the slide and we again have our
  • 00:15:47 element right here but now we don't have
  • 00:15:49 position fixed but now we have position
  • 00:15:52 absolute applied to this element now the
  • 00:15:55 question again is if we want to say that
  • 00:15:57 this element should have a width of 50
  • 00:16:00 percent what is the containing block
  • 00:16:03 what does this 50 percent width actually
  • 00:16:06 depend on well and the containing block
  • 00:16:09 in this case is an ancestor
  • 00:16:12 and off this answer it will be the
  • 00:16:15 content and additionally the padding so
  • 00:16:19 this basically means that we want to
  • 00:16:22 change the width of our element to 50%
  • 00:16:26 and if we apply the position:absolute
  • 00:16:28 declaration then this 50% is calculated
  • 00:16:32 again based on the containing block
  • 00:16:35 specifically of the content and the
  • 00:16:38 padding of this ancestor and that's
  • 00:16:41 important to keep in mind what's even
  • 00:16:44 more important to keep in mind is that
  • 00:16:45 we still don't know what the ancestor
  • 00:16:48 actually is or which element is the
  • 00:16:50 enter sir
  • 00:16:51 well and the answer is actually quite
  • 00:16:54 simple because the ancestor is sympathy
  • 00:16:57 element which has one of these values
  • 00:16:59 for T position properties applied so
  • 00:17:02 basically the closest element which
  • 00:17:04 doesn't have position static being
  • 00:17:07 applied I put position sticky in two
  • 00:17:10 brackets because we didn't covered it so
  • 00:17:12 far throughout the series I just wanted
  • 00:17:13 to make sure that you can also find
  • 00:17:15 position sticky right here so that's the
  • 00:17:18 thing we have to keep in mind and that
  • 00:17:20 we have to try out right now we need to
  • 00:17:22 apply position:absolute to our element
  • 00:17:24 and then apply position absolute
  • 00:17:27 relative or fixed to our containing
  • 00:17:29 block or to the element that we want to
  • 00:17:32 specify as the containing block let's
  • 00:17:34 try that out so back in the code and the
  • 00:17:38 first thing we do is we should change
  • 00:17:39 position fixed to position absolute as
  • 00:17:43 we just learned it and we can also get
  • 00:17:46 rid of that left zero now doesn't play a
  • 00:17:48 role and now let's add position oops
  • 00:17:53 position maybe relative right here to
  • 00:17:57 our nested selector by that to the
  • 00:18:00 element with the nested class right here
  • 00:18:02 if we now go back to the code and reload
  • 00:18:05 the page well we can see that the width
  • 00:18:08 again changed and let's now see what
  • 00:18:11 exactly happened because we have a width
  • 00:18:13 of 240 6.5 pixels and the element with
  • 00:18:18 the nested class right here has a width
  • 00:18:21 of 703 pixels which is basically not
  • 00:18:26 twice the which we have right here for
  • 00:18:28 360 4.5 now let's have a closer look at
  • 00:18:31 that and let's go right here to the
  • 00:18:34 nested class right there and scroll down
  • 00:18:37 maybe increase there a little bit let's
  • 00:18:42 see
  • 00:18:42 because you can see how the width is
  • 00:18:45 actually calculated we have six five
  • 00:18:48 three as the content width and then we
  • 00:18:51 have a padding of 20 to the left and 20
  • 00:18:54 to the right so this means that the
  • 00:18:56 total width of that element with the
  • 00:18:59 nested class is 693 pixels and if you
  • 00:19:05 nothing back about the width of our
  • 00:19:07 content right here this is 300 46.5 well
  • 00:19:13 and times 2 this is exactly 693 pixels
  • 00:19:18 so exactly the content width plus the
  • 00:19:22 padding of the element of the closest
  • 00:19:25 ancestor which has in our case t
  • 00:19:28 position:absolute declaration applied as
  • 00:19:31 I said this also works with absolute
  • 00:19:33 fixed or sticky being applied as a value
  • 00:19:36 for the position property now let's have
  • 00:19:39 another look and let's now add the
  • 00:19:42 position:relative declaration right here
  • 00:19:45 to our navigation element and let's see
  • 00:19:48 what happens now if we save that and go
  • 00:19:50 back and reload the page we can now see
  • 00:19:54 that the size here changed
  • 00:19:55 we now have 370 1.5 and if we now go to
  • 00:19:59 our navigation element right here we can
  • 00:20:02 see that we have 703 plus 20 plus 20 so
  • 00:20:08 743 as a width and if we go back to our
  • 00:20:11 content well you can see 370 1.5 to is
  • 00:20:18 exactly these 743 that we have right
  • 00:20:21 here so that's the second rule that you
  • 00:20:24 can remember if you have
  • 00:20:26 position:absolute applied to the element
  • 00:20:29 you want to change the size for then the
  • 00:20:32 containing block for this element is the
  • 00:20:34 closest ancestor which has the position
  • 00:20:37 property with a value
  • 00:20:39 from static applied select what's the
  • 00:20:42 second rule as I said now let's have a
  • 00:20:44 look at the third rule again our
  • 00:20:46 starting point is the element that we
  • 00:20:48 want to change the size but now we have
  • 00:20:50 either position static or position
  • 00:20:53 relative applied and now again what's
  • 00:20:55 the question what is the containing
  • 00:20:58 block well and in this case it's again
  • 00:21:01 an ancestor but this time it's only the
  • 00:21:05 content of that ancestor and now you
  • 00:21:08 might ask again okay and what is the
  • 00:21:11 ancestor or what is the Criterium for
  • 00:21:14 that ancestor to be the containing block
  • 00:21:16 well the answer is it simply must be a
  • 00:21:20 block level element so to summarize that
  • 00:21:23 if you apply position static or position
  • 00:21:27 relative to your element and by the way
  • 00:21:29 position static is the standard or the
  • 00:21:32 default value so if you don't apply the
  • 00:21:34 position property then this is always
  • 00:21:36 true well then the containing block is
  • 00:21:39 simply the ancestor or the closest
  • 00:21:42 ancestor which is a block level element
  • 00:21:44 and of this ancestor the value that will
  • 00:21:50 be used as a reference is the width of
  • 00:21:52 the content so that was quite a lot but
  • 00:21:56 I think with that we got the basic set
  • 00:21:59 and you're not able to work with the box
  • 00:22:01 sizing in a better way let's now head
  • 00:22:04 back to our code and have a look at
  • 00:22:06 these third rule in practice and then
  • 00:22:10 there is one less thing that I would
  • 00:22:12 like to show you in this video so back
  • 00:22:15 in the code and now we said that we will
  • 00:22:18 change our position from absolute to
  • 00:22:21 either relative or static so let's say
  • 00:22:25 static so I'm not adding anything right
  • 00:22:27 here and we still have the width of 50%
  • 00:22:29 applied so if we go back to our code now
  • 00:22:32 and reload the page we can see that it
  • 00:22:36 almost looks like in the beginning
  • 00:22:37 actually of this video but now we should
  • 00:22:40 understand why our content element right
  • 00:22:44 here has the width that it has because
  • 00:22:47 if we inspect that we can see that the
  • 00:22:51 element has a width of
  • 00:22:54 26.5 pixels and if we now go right here
  • 00:22:59 to our nest that element I think it's
  • 00:23:03 this one yes and now go down we can see
  • 00:23:07 that this has a width of 653 pixels the
  • 00:23:13 important thing is that it only refers
  • 00:23:15 to the content as we saw it on a slide
  • 00:23:17 and if we now remember back what we saw
  • 00:23:20 for the content element right here with
  • 00:23:23 320 6.5 pixels well this is exactly 50%
  • 00:23:28 of the content width of the containing
  • 00:23:31 block which in our case is the ancestor
  • 00:23:35 which is the closest ancestor which is a
  • 00:23:38 block level element now feel free to
  • 00:23:42 play around with the things we just
  • 00:23:43 talked about because it really makes
  • 00:23:46 sense to practice that to get a better
  • 00:23:48 feeling for the different
  • 00:23:49 interdependencies reffered here but as I
  • 00:23:52 said with the free rules to remember I
  • 00:23:55 think you really got a solid basis but
  • 00:23:59 as I said there is one less thing that I
  • 00:24:02 would like to show you and for this last
  • 00:24:04 thing we will switch to our web page
  • 00:24:06 right here and now focus onto this part
  • 00:24:10 so onto these two images and these two
  • 00:24:12 images are here in the main part and in
  • 00:24:15 the trip images class because what do I
  • 00:24:19 want to show you let's go to the road
  • 00:24:20 well if we go down right here to Maine
  • 00:24:24 and to the images well then we have this
  • 00:24:28 width property right here important we
  • 00:24:32 are working here in a flexbox
  • 00:24:34 environment but what I show you right
  • 00:24:36 here can also be applied if you're not
  • 00:24:38 working with Flex box because I want to
  • 00:24:42 show you the min width and the max width
  • 00:24:45 properties it's also available for the
  • 00:24:48 height min height max height but as I
  • 00:24:51 said before I will stick to the width in
  • 00:24:53 this video because what do I want to do
  • 00:24:57 right here well we have the width of 50%
  • 00:25:00 apply it right here so 50% this means
  • 00:25:04 50% of the width
  • 00:25:07 of D let me show you I think it's better
  • 00:25:09 right here 50% of this trip images class
  • 00:25:13 right here so 50% you can see this image
  • 00:25:15 was 50% and that image that's nice but
  • 00:25:18 the problem is that if I go right here
  • 00:25:22 for example I don't like that I think
  • 00:25:25 the images are way too small and this
  • 00:25:28 means if I would be able to specify
  • 00:25:31 something like now it comes something
  • 00:25:33 like a minimum width well this could be
  • 00:25:37 helpful right I think it is so let's go
  • 00:25:40 back and let's now add right here the
  • 00:25:44 min width property and let's say the
  • 00:25:48 moon width should be I don't know let's
  • 00:25:51 say I don't know how big this is right
  • 00:25:52 here yeah I think 200 pixels maybe
  • 00:25:56 that's also really important you need to
  • 00:25:59 have two different values for the width
  • 00:26:02 and 40 min width because otherwise if
  • 00:26:05 you specify a width of 200 pixels and
  • 00:26:07 the minimum width of 300 pixels I don't
  • 00:26:11 think this makes a lot of sense because
  • 00:26:12 then only the men would will be applied
  • 00:26:16 therefore make sure to have something
  • 00:26:19 like that like 50% of the width that's
  • 00:26:22 the general rule so basically to make
  • 00:26:24 sure that 50% of the space available is
  • 00:26:27 the image but as soon as you go below a
  • 00:26:32 certain minimum value in absolute pixels
  • 00:26:35 right here well then it should change
  • 00:26:38 because if we save that go back and
  • 00:26:41 reload the page now nothing changed but
  • 00:26:44 if we now decrease the size you can see
  • 00:26:47 that once we reach the 200 pixels the
  • 00:26:52 page or the image won't get any smaller
  • 00:26:55 problem though is that we cannot see the
  • 00:26:58 image anymore therefore that might not
  • 00:27:01 be the best way to do it but we know how
  • 00:27:03 to solve this quickly from the last
  • 00:27:05 video when we talked about flexbox
  • 00:27:07 because we can simply say flex wrap
  • 00:27:10 right here and set it to wrap loops like
  • 00:27:14 that if we now save that and go back to
  • 00:27:18 our page and reload it
  • 00:27:20 we can see that if we make it smaller
  • 00:27:22 that the image is now displayed right
  • 00:27:25 here below and it won't get any smaller
  • 00:27:29 once we reach our minimum value of
  • 00:27:32 course and I will totally agree a few
  • 00:27:34 years could say this doesn't look good
  • 00:27:36 right now and we'll work on that when we
  • 00:27:39 talk about media queries from the series
  • 00:27:41 no worries for the moment the important
  • 00:27:44 thing I want to show you is that with
  • 00:27:45 the combination of width and min width
  • 00:27:48 you can make sure that your pages are a
  • 00:27:51 little bit more responsive already now
  • 00:27:54 there is also a max width property let's
  • 00:27:57 have a look at that maybe because we can
  • 00:28:00 also say right here that the max width
  • 00:28:03 like that should be let's say 500 pixels
  • 00:28:09 like this just save that and if we go
  • 00:28:12 back and we load the page then you can
  • 00:28:15 see that we have our min width it may be
  • 00:28:17 unselect inspector we have our own min
  • 00:28:19 width right here now we increase the
  • 00:28:22 size it increases it increases it
  • 00:28:25 increases but once we reached the 500
  • 00:28:28 pixels it won't get any bigger
  • 00:28:31 the rest is same thing true with that I
  • 00:28:33 just said a few seconds ago we'll fix
  • 00:28:35 that when we talk about media queries
  • 00:28:37 the important thing here now is that by
  • 00:28:40 using min width width and Max width you
  • 00:28:43 can make sure with width that your
  • 00:28:46 elements are displayed correctly on
  • 00:28:48 let's say normal devices you can specify
  • 00:28:52 that you want to keep a minimum width on
  • 00:28:55 smaller devices like mobile devices and
  • 00:28:58 you can also specify a max width because
  • 00:29:01 our displays or our TVs are getting
  • 00:29:03 bigger and bigger and you don't want to
  • 00:29:05 increase the image size without any
  • 00:29:08 limits therefore setting a max width for
  • 00:29:11 big devices also can make a lot of sense
  • 00:29:14 now we only touched it min width and
  • 00:29:17 next with properties right here because
  • 00:29:19 the problem is that we don't only have
  • 00:29:22 free device sizes we have multiple
  • 00:29:25 devices
  • 00:29:26 additionally we don't only have the
  • 00:29:28 width or the height that should be
  • 00:29:30 changed it could also be that you want
  • 00:29:32 to have I don't know different
  • 00:29:34 colors on a different device or you want
  • 00:29:36 to have some elements to disappear on
  • 00:29:38 specific device sizes things like that
  • 00:29:40 or getting things transparent there are
  • 00:29:43 a lot of different options that you have
  • 00:29:44 so basically you might want to change
  • 00:29:46 multiple properties depending on the
  • 00:29:49 device size and this brings us to media
  • 00:29:53 queries I talked about that already and
  • 00:29:55 I have to repeat myself we'll have a
  • 00:29:58 look at that well not in the next video
  • 00:30:01 but in the video following the next
  • 00:30:02 video and there will then talk about the
  • 00:30:05 details behind media queries what you
  • 00:30:07 can keep in mind right now is that using
  • 00:30:09 min width and max width gives your page
  • 00:30:13 a more responsive design already but
  • 00:30:15 it's limited to these properties however
  • 00:30:18 as I said we'll talk about the details
  • 00:30:20 in the video following the next video
  • 00:30:22 and in the next video we'll have a look
  • 00:30:24 at fonts so font sizes how we can change
  • 00:30:27 that and how we can import different
  • 00:30:30 font styles to our website because I
  • 00:30:32 think both the font size and the font
  • 00:30:36 style is not perfect right now
  • 00:30:37 so therefore hope to see you in this
  • 00:30:39 video hope you now have a better
  • 00:30:41 understanding of box sizing in CSS well
  • 00:30:44 and as always thanks so much for
  • 00:30:46 watching hope to see you in the next
  • 00:30:48 video bye