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
Пікірлер: 72
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?
It's amazing how I could go through a 17 min tutorial without ever getting bored. Amazing job, and helpful lessons!
“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!
Webflow is awesome. Exepct it isnt, but it absolutley is! Pure Gold
@PhilipZilfo
3 жыл бұрын
😂😂
“The more familiarity we build with CSS sizing sizing, the more we can apply these skills to create almost anything for the web.” -Sophocles
"...and save on average, time" this is one of the greatest tutorials I've ever come across
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!
Just absolutely love watching you guys and I learn so much!
@Webflow
3 жыл бұрын
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.
I feel like I’m cheating watching these tutorials, it shouldn’t be this easy and comprehensive. 🔥
This is by far the best tutorial I've ever got!
As a designer, I find CH very useful
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.
You have an impressive way of communicating information and teaching! Please continue to teach. These tutorials are gold!
This calms my anxiety with units...sigh Top quality study material.
I didnt even finished watching the intro but it was enough to hit that suscribe button
This is Top Quality material. Thanks!
@Webflow
3 жыл бұрын
Glad you like it! Thank you, hipErxyz!
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
On to the next video! Great stuff!
As soon as I start hearing the music I give it a like.
Just found this GEM. Thank you :) for the great explanation
This saved my life now
Explained it beautifully. Thanks Sir!
fantastically explained!
Very good guys, you rock!
m addicted and a fan now...started webflow
great tutorial!
5.44 "Like a calculator but without the attitude" How on earth does he keep a straight face?
Why am I attracted to the man teaching me how to fix my broken website lmao
the fact that this video started as a movie trailer is just it for me...my like went 5s into the video
i love webflow man
awesome content
Thank you so much
To be picky; at 6.11, I think it should say 20 EM and not 16 EM
I understood your content. But things are getting complicated, how do we practice it in order to concrete the information.
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
Well that should have bin my first webflow tutorial 😅
Damn I should have stayed in school. Going to be rewatching till I get it lol
At 6:09 it's supposed to be 16 px times 20.0 em.
6:09 i think there is a typo, must be 20em instead
@Webflow
3 жыл бұрын
Thanks, Phil! We'll reach out to the team and let them know!
What app is he using?
Is this a new lesson or it's a part of a course on Webflow university?
@Webflow
3 жыл бұрын
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
3 жыл бұрын
@@Webflow Wow, nice stuff. Great job
What an intro
All I cared for was centi litres(cl) units except I did not.
What program are you using
@BenFigueiredo23
3 жыл бұрын
🧐
@Webflow
3 жыл бұрын
Hi, Joe! This is Webflow - check it out! www.webflow.com
@JoeBodego
3 жыл бұрын
@@Webflow as a lifelong dreamweaver user this is not making me feel good. i would try this it seems so much more logical
@BenFigueiredo23
3 жыл бұрын
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)
vw which is a german automotive corporation.. made me chuckle.
Who else, likes the way he talks?
vw-volkswagen
as a germany based developer i cried here 16:20
heyyyyyy what about centiliters??? 😂😂😂
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
3 жыл бұрын
You're not losing your mind - it should indeed be VW! The update is reflected in the captions; unfortunately KZread won't let us upload the correction in the audio or video side. Great catch!
@grittygirlgraphics8633
3 жыл бұрын
@@Webflow I probably am losing my mind, except that I’m not.
this video is great, except its not. so hear why it's great.
When I heard vwin, I thought you said women
No more chocolate chip cookie photos please...
@Webflow
3 жыл бұрын
Oatmeal raisin then?
@grittygirlgraphics8633
3 жыл бұрын
@@Webflow yeah those are gross. Perfect for the 1am viewing of the above lesson. 😎
I really don't like these series, except I do, a lot.