Hi, I am trying to comprehend the min, max, height and width properties. Understanding of width and height is to set the obvious width and height of an element. Max-width, more flexible with browser and resizes content as browser window gets smaller as I've seen in examples. I'm guessing max-height does the same thing. What does min-height and min-width do? and what would be some practical/logical examples sernarios using all of these properties. I obviously know how and when to use the normal width and height. I would like to understand these properties a little more: max-width, max-height, min-width and min-height.
Actually, I think I understand the use of min width and height now. It is used to set the smallest size in the case of a percentage or something to stop the box from becoming so small that it vanishes.
Hello Web_Dev_Chris. I forget when and where the last time I use min-/max- for height. I think I would never use them, unless layout gets very complex. Probably. In my opinion the most useful is the min-width. It prevents any devices to shrink page-width any narrower and ruin your layout. I usually set this to 320px on most pages. Second to that is max-width, I would usually use it to limit page-content not to get as wide as available screen width and gets ugly.
Apart from setting min-width as px-width, good advice. Avoid using px as measurement on almost anything in a CSS file. Using px fucks up a lot of responsiveness, and usually just leads to trouble. Use % or em instead.
I'd say my most common use for max-width is something like this: .width-wrapper { padding: 0 1.25em; margin: 0 auto; box-sizing: border-box; max-width: 70em; } Code (markup): It's really good if you want to mix px/em/rem/whatever with percentages. "Make this element 80% of the screen width but stop once it hits 800px's" or whatever. I'm having a hard time thinking of times I user min- . Once in a while I'll have to do something funking like min-height: 100vh
As I start with pre CSS3 capable desktop browsers as my starting point, recognizing that they are incapable of performing media queries and as such the only logical starting point (no matter how many ignorant fools say "mobile first" or dick around making multiple version of the same content), min-width is one of the first things I add -- to BODY. This is because without media queries, I don't want the layout to break in legacy UA's like blazer, IE8, IE7, etc. I set a desktop min-width on body (usually 40 to 44em at 85% font-size) to prevent the fluid layout from breaking, just as I set a max-width on any width wrapping element(s) to prevent long lines from being hard to read. I then when media queries are working drop the min-width on body to 192px, which is the smallest mobile browsing width we're likely to give a **** about. I also go the extra mile of using the "*html" hack to shove a fixed width at IE6- since it's like 40 characters max... min-height has it's uses, though much like declaring height you have to be careful with it. The only "real' use for it is 100% min-height layouts, and with FF being a retard about EM's forcing you to use px measurement footers with non-dynamic height on said method, I've said to hell with IE9/earlier even having min-height work, and instead use flex-box for modern browsers and let the page end where it ends on legacy -- again since I could give a flying purple fish if goofy things like the footer pushed to the bottom of the window when the content is short, border-radius, shadows and gradients actually show up on older browsers so long as the content is still usable and accessible. They don't get a few fancy bells and whistles, don't bend over backwards for it. One big thing to remember is that a % height or min-height will NOT work and be ignored if the parent element does not have an express height declared on it... so if you want to use min-height:100% on a child of body, you'd need to set height:100% on both body and html. In all browsers height:100% defaults to behaving like min-height on body thanks to the default overflow state.