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

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
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow

[@MatiasCollado]

When 2020 is over, I will remember Webflow as the only great thing of the year.

[@MaykaOw]

It´s 2023 already, so I have to ask. Was Webflow the only great thing of 2020?

[@ChrisMooreOfficial]

“Like a calculator, but without the attitude.” 😂 In addition to the sarcasm and dry humor, I love McGuire's delivery and cadence. These videos are a serious work of art!

[@hsabes400]

"...and save on average, time" this is one of the greatest tutorials I've ever come across

[@shubhamraut1039]

It's amazing how I could go through a 17 min tutorial without ever getting bored. Amazing job, and helpful lessons!

[@spencercamps]

“The more familiarity we build with CSS sizing sizing, the more we can apply these skills to create almost anything for the web.” -Sophocles

[@damjan9548]

Webflow is awesome. Exepct it isnt, but it absolutley is! Pure Gold

[@PhilipZilfo]

😂😂

[@MaykaOw]

EL MEJOR, repito, EL MEJOR TUTORIAL QUE HAYA VISTO ALGUNA VEZ. Posta, lo vi completo sin aburrirme, y totalmente interesada por lo que estaba viendo. Así deberían ser todos los tutoriales. Chapeau por los chistes que deslizó por ahí como si nada. Un 10!

[@mc_coolcat847]

I feel like I’m cheating watching these tutorials, it shouldn’t be this easy and comprehensive. 🔥

[@aleksitjvladica.]

This is by far the best tutorial I've ever got!

[@cariocadobrasil7]

Just absolutely love watching you guys and I learn so much!

[@Webflow]

Our pleasure! We're excited about what we're launching, and can't wait to hear what you think about some bigger upcoming things we're working on.

[@aurora23301]

You have an impressive way of communicating information and teaching! Please continue to teach. These tutorials are gold!

[@mateojimenez3337]

I didnt even finished watching the intro but it was enough to hit that suscribe button

[@abirahmed1292]

As a designer, I find CH very useful

[@DanBorgia]

As soon as I start hearing the music I give it a like.

[@cryptified5161]

On to the next video! Great stuff!

[@dokedoke0426]

This calms my anxiety with units...sigh Top quality study material.

[@KamakazeCOG]

its almost 1am and i had to pause this video to say not only is this guy hilarious. the video is practical and very informative. thanks webflow

[@steveperry6047]

I used to hate coding. WebFlow and I met, now I rejoice when fixing HTML/CSS issues. WebFlow bridges that gap between visual learners and programming thinking approaches.

[@stilllearning1172]

Just found this GEM. Thank you :) for the great explanation

[@zentowwwner]

This is Top Quality material. Thanks!

[@Webflow]

Glad you like it! Thank you, hipErxyz!

[@SoulPrints]

This saved my life now

[@aleexious2466]

Explained it beautifully. Thanks Sir!

[@LaolaLoges]

fantastically explained!

[@sprintwithcarlos]

Very good guys, you rock!

[@yungsnowbank]

Why am I attracted to the man teaching me how to fix my broken website lmao

[@user-lu4uo1wj5o]

great tutorial!

[@naruto5437]

m addicted and a fan now...started webflow

[@harrietiluekhabho9795]

the fact that this video started as a movie trailer is just it for me...my like went 5s into the video

[@mikepotter]

i love webflow man

[@jsanjeykumar]

awesome content

[@grahamtaylornyc]

5.44 "Like a calculator but without the attitude" How on earth does he keep a straight face?

[@itsdevgarg]

Thank you so much

[@the-secrettutorials]

Well that should have bin my first webflow tutorial 😅

[@L_E_A]

To be picky; at 6.11, I think it should say 20 EM and not 16 EM

[@galloburrito4252]

Damn I should have stayed in school. Going to be rewatching till I get it lol

[@Mayank-rs7kg]

I understood your content. But things are getting complicated, how do we practice it in order to concrete the information.

[@LutherDePapier]

At 6:09 it's supposed to be 16 px times 20.0 em.

[@user-tm8vh3vr8o]

why not in 7:10 "something inside that" just uses the font size specify to "something inside that" element as a reference? But you said to multiply all ems and px together? please help me out cuz I'm focused

[@oruaromukoro5072]

What an intro

[@feelphila]

6:09 i think there is a typo, must be 20em instead

[@Webflow]

Thanks, Phil! We'll reach out to the team and let them know!

[@edanjumbo]

Is this a new lesson or it's a part of a course on Webflow university?

[@Webflow]

Hi! We're currently producing a number of new lessons and courses - this lesson is launched solo for right now, but will be featured in some courses as an updated component (for instance, this will be featured int the 101 Crash Course for new users). Stay tuned, because we're launching brand-new courses over the next few months that'll contain modern layouts, advanced animations, and even comprehensive SEO.

[@edanjumbo]

@@Webflow Wow, nice stuff. Great job

[@thesouthsidedev1812]

Who else, likes the way he talks?

[@mukulishwar2737]

All I cared for was centi litres(cl) units except I did not.

[@YAakash]

vw which is a german automotive corporation.. made me chuckle.

[@yanchan06]

What app is he using?

[@JoeBodego]

What program are you using

[@BenFigueiredo23]

🧐

[@Webflow]

Hi, Joe! This is Webflow - check it out! www.webflow.com

[@JoeBodego]

@@Webflow as a lifelong dreamweaver user this is not making me feel good. i would try this it seems so much more logical

[@BenFigueiredo23]

Joe Bodego as some one who learned dreamweaver, but never continued with it, went on to use Wordpress for the last couple of years and just built my first @webflow site, I can attest that it is the easiest and funnest. (If funnest was a word)

[@memeteliniyaz9842]

as a germany based developer i cried here 16:20

[@macxdeeyt2767]

vw-volkswagen

[@PhilipZilfo]

heyyyyyy what about centiliters??? 😂😂😂

[@shanemarchan658]

this video is great, except its not. so hear why it's great.

[@grittygirlgraphics8633]

Being that McGuire is a perfectionist, he may want to know that at 8:00-8:02, he really meant to say VW and not VH...I think...or I'm losing my mind.

[@Webflow]

You're not losing your mind - it should indeed be VW! The update is reflected in the captions; unfortunately KZbin won't let us upload the correction in the audio or video side. Great catch!

[@grittygirlgraphics8633]

@@Webflow I probably am losing my mind, except that I’m not.

[@TsukiDrawing]

When I heard vwin, I thought you said women

[@grittygirlgraphics8633]

No more chocolate chip cookie photos please...

[@Webflow]

Oatmeal raisin then?

[@grittygirlgraphics8633]

@@Webflow yeah those are gross. Perfect for the 1am viewing of the above lesson. 😎

[@jamesrimes2870]

I really don't like these series, except I do, a lot.