CSS width & height, object-fit, overflow, and CSS units (ems, rems, vw, vmin, fr, ch, and more)

Posted on
September 4, 2020

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: https://wfl.io/2r7cVUW https://webflow.com https://twitter.com/webflow https://facebook.com/webflow

View resource


Similar resources