This video content is for premium members only. Please log in or upgrade your account to view it.

CSS width & height, object-fit, overflow, and units (px, %, ems, rems, vw, vh, vmin, vmax, fr, ch)

Learn more about CSS positioning principles and responsive design.
In responsive web design, width and height properties are sized based on the content inside, but can be more specifically defined using pixels (px), percentages (%), ems, rems, viewport width (vw), viewport height (vh), viewport minimum and maximum (vmin and vmax), fractional units (fr), and character units (ch). In this lesson, we’ll cover each of these units, as well as minimum and maximum values, overflow, and object-fit. 00:00 - Introduction 00:54 - Automatic sizing 01:48 - Size units 02:02 - Pixels (px) 04:50 - Percentages (%) 05:47 - Ems (em) & rems (rem) 07:55 - Viewport-based units (vw, vh, vmin, vmax) 09:16 - Fractional units (fr) 10:19 - Character units (ch) 11:13 - Minimum & maximum dimensions 13:35 - Overflow (visible, hidden, scroll, auto) 14:31 - Object-fit (fit, contain, cover, none, scale down) 15:37 - Recap ---------- Get started with Webflow: