New CSS viewport units and minimum heights - Webflow tutorial

There are unintentional things you may be doing that make your site look wrong on mobile devices.
00:00 - Introduction
00:34 - VH
01:10 - DVH
02:04 - SVH
02:23 - Setting heights
Read more about small, large and dynamic units → university.webflow.com/lesson...
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

[@simbam7124]

This team's sense of humour has reached legend status for me

[@Alexander-cd9zx]

I was wondering if you guys would make a video about common mistakes that beginners make when trying to make a website. Or maybe some do's and don'ts when it comes to development in web flow.

[@ahhmuntea]

Yeah using Min Height was a hurdle lol

[@dougvargas1680]

This tutoriales are so straight to the point

[@PatrikRasch]

This is the best explanation and most aesthetic CSS tutorial I have ever seen by far.

[@diegoocasiano]

Well, this is the best web development tutorial I've ever seen. Please never stop!

[@ParsaUndead]

I will watch any video that this guy makes even if I fully know the subject

[@eugenesoch]

LOVE IT! I’ve been waiting for this for ages! 🎉🎉🎉❤

[@nicolatoledo]

This is a very important lesson, that every webflow dev have to master, also if you have given a fixed height to a section with an image, to prevent the content from overflowing, you can give min height 0 to the image in this way the image will shrink

[@ralfsbanders6108]

What about a tablet or browser view? Does need to set also minimum heights?

[@nicolatoledo]

@@ralfsbanders6108 no if you set it to desktop it is inherited by all other breakpoints

[@james1327]

I’ve been struggling with 100vh on mobile. Great vid.

[@lobsangburgos5752]

Great Work Guys!!!

[@andriiantoniuk8419]

Very nice video even for skilled dev! Much appreciated, keep up going ❤

[@coreypfeiffer6322]

This video is exactly what I wanted! 😁

[@Peepeekachu]

Omg this helps a lot. Thank you

[@AllanLeonardJr]

That was good, great ending too!

[@SimonTutorial]

Nice tutorial!😍

[@blysk.agency]

Hey! Thanks for the new tutorial, this one covers different aspects way better than previous DVH one 😉

[@user-ki9iy4tz9f]

Oh i love this. a very dangerous video!!

[@pablogday]

Love the ending 😅

[@nickzubrik]

Thanks for the great tutorial! You should use SVH in the next video to avoid cli

[@anandv1391]

Cli means?

[@dolapoaraoye8124]

Thanks for the tutorial, nice outro 😂

[@chieffixie]

Lol the ending got me 🤣. Thank you, Webflow!

[@thegodfreyadams]

Well, content got clipped as promised! 😂😂😂 Webflow Tutors 🤝🏼 Humour.

[@montazh2128]

Wow, nice solution! Cause with dvh when browsers bar shows off and on section always dynamically changes and it looks awful 😂 Thanks!

[@jonb5150]

I get it, he's talking about VH (Van Halen)'s, Best of Both Worlds. Great song!

[@alfredneumann701]

That´s great, thanks! What´s that app you are using there?

[@jimmysimmons6477]

haha solid ending there 😂

[@matthewnorris879]

SVH for the win

[@Thiru.K]

Hey ! I got a prob, after adding Interaction to a Button and when i checked while previewing it , The button got disappeared, I pressed on the place where the button was placed before then it came into that place while previewing , and every single time while previewing it I have to do that , The same problem goes in after publishing also,IS THERE A SOLUTION?

[@Webflow]

Can you post this question and your project's read-only link on our forum? discourse.webflow.com university.webflow.com/lesson/share-your-site

[@nweirsd]

Webflow, will you consider adding SVH to the height/width input formats in Webflow? It’s not clear to your customers that this exists unless you type it out ‘SVH’ manually

[@Webflow]

We're already on it! Look for that update shortly. 🙏

[@nweirsd]

This why we love you!! Thanks Webflow 🙌🙌

[@pufgreen]

i still cant see the svh on the designer, when this will be available?

[@Webflow]

We will be adding it soon. For now, you can type it in directly. For example "100svh". Hope this helps :)

[@13rast]

💣💣💣💣

[@fictionplus]

Webflow should acquire Studio AI. Or make something similar cause wow-

[@TheGeigerUX]

I’m even more confused

[@Alexander-cd9zx]

Im relieved that im not the only one who is more confused now haha.

[@Webflow]

Hi, @JamesGeiger - here's our TLDR - let us know if we can dig deeper! Whenever setting something like a section's height, here's the breakdown: 1. Don't use VH if you don't want something like a section to get covered by dynamic toolbars on mobile. 2. Only use DVH if you're okay with the height changing every time someone scrolls and dynamic toolbars appear or disappear. 3. Use SVH if you want the height to respect dynamic toolbars, but not resize the moment that toolbar disappears. 4. Instead of setting any of these values on "height", set them on "minimum height" just in case you have too much content in your section, as "height" won't flex to accommodate all that extra content.

[@Webflow]

Please let us know which part is unclear and we'll do everything we can to make it clear. 💙

[@ketandudhe2754]

​@@Alexander-cd9zxDon't worry, just put it to use once or twice, you'll get it.

[@ericschenkenberger6118]

One more reason that Android is superior to Apple. I don't have this issue on my android, as I can just hide the buttons at the bottom and use gesture controls. On my phone, 100vh is 100vh, always.

[@Warface]

So basically a new units because Safari is the new internet explorer. I hope Safari dies soon

[@Webflow]

This is not at all specific to Safari; this applies to tons of devices on iOS and Android, as well as tablets running iPadOS and Android. Jen Simmons shared a great tweet explaining this in diagrams: twitter.com/jensimmons/status/1499441043930062854?s=20