Min and Max Values
There are a few ways of ensuring our boxes are sized appropriately for the contained content. One is to set min and max sizes for both width and height.
min-height: properties ensures a content box will never be too small.
Likewise, setting the
max-height: properties ensures that a box that is intended to display a small amount of information never gets too big.
When thinking about adaptive sizing, you should always test by - you guessed it - resizing your browser to see how your layout performs. Start by manipulating your window:
Your layout may also be affected by text size. If you think the size of your text is totally in your control, you are 100% wrong. Most browsers allow for user zooming as an accessibility feature. Try zooming in to see how this affects the contents:
For Mac: ⌘ Cmd and + or -
For PC: Ctrl and + or -