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

preview_player
Показать описание
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.

----------

Рекомендации по теме
Комментарии
Автор

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

MatiasCollado
Автор

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

shubhamraut
Автор

“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!

ChrisMooreOfficial
Автор

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

damjan
Автор

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

hsabes
Автор

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

spencercamps
Автор

might have been one of the most helpful tutorials known to mankind :)

hardwaretalk
Автор

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!

MaykaOw
Автор

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

cariocadobrasil
Автор

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

mc_coolcat
Автор

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

aleksitjvladica.
Автор

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.

steveperry
Автор

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

DanBorgia
Автор

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

mateojimenez
Автор

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

aurora
Автор

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

dokedoke
Автор

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

KamakazeCOG
Автор

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

yungsnowbank
Автор

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

harrietiluekhabho
Автор

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

grahamtaylornyc