Wednesday - Min/Max Height & Width

If we don't specify height and width in CSS, Web browsers will let the content spill out and dictate the height and width accordingly. That's not good Web design, however, so I expect you to specify widths and heights more often than not. Widths are more important here than heights, because although we are used to scrolling down to get to more content, we're not so happy scrolling left and right as we read each line. It gets cumbersome.

And although it makes sense to set height and width as some percentage, that's best reserved for subelements in a page. The page itself is probably best off having absolute dimensions (like a width of 100rem) and then defining the dimensions of each element on the page. CSS Grid manages a lot of that for us, but it still makes sense to define the height and width of your grid, right?

Similarly, there are times when you need to make sure an element is at least high and wide enough to show the content without scrolling and there are times when you need to make sure an element doesn't stretch so far in either height or width that it looks bad. So in addition to setting height and width, you can also specify min-height, min-width, max-height, and max-width. The best way to try these out is to code them then manually expand and contract the browser window to see how your components reconfigure themselves responsively.

If you're still confused about this stuff (and I admit, the above text isn't as clear as I'd like it to be), you should check out W3Schools' tutorial on height and width.

Once you have defined the height and width of elements in your main.css I need you to spend the remainder of the bell working on your semester-long projects. In addition, I will come around today to record your progress in Codecademy, so please be logged in to make it a smooth process.