The problems with viewport units

Подписаться 915 тыс.

Просмотров 352 тыс.

50% 1

Conquering Responsive Layouts (free course): courses.kevinpowell.co/conque...
Join the Discord: kevinpowell.co/discord
Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizontal scrolling to accessibility issues and more, so in this video I look at the problems that people run into by using them and offer up some alternatives.
🔗 Links
✅ Discord: kevinpowell.co/discord
✅ Dynamic viewport unit browser support: caniuse.com/mdn-css_types_len...
✅ Codepen: codepen.io/kevinpowell/pen/Po...
✅ Conquering Responsive Layouts: courses.kevinpowell.co/conque...
⌚ Timestamps
00:00 - Introduction
00:22 - Issue 1: Using 100vw
02:00 - Issue 2: The problem with 100vh
07:28 - Issue 3: Fluid layouts
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

7 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 411

@Brunoenribeiro Год назад

Liking the new format, Kevin! No logo splash, faster intro, going straight to the juicy content. Hope it doesn't hurt your channel's metrics! Thank you for giving it a go ❤️

@bobwilkinsonguitar6142 7 месяцев назад

Devs watch RU-vid on 2x speed, angrily scrolling until they find the code that fixes their bug, I'm /sure/ this is helping😂

@jasonoconner7863 Год назад

Wow, I was just the other night ranting about the vw units causing horizontal scroll and ChatGPT being unable to help me. Thank you!

@NotJayG Год назад

you can use overflow-x: hidden; or width: 100%; instead

@FeresVocalArts Год назад

Man, these were the most productive 13 minutes I've been into since so long! Thank you so much!

@potrosanjuan Год назад

I didn't know why that annoying horizontal scroll appeared, I don't know what I'd do without your videos, thank you Kevin!!!!

@developerpranav Год назад

100vh has been problematic for me! never had to use 100vw, but it's good to see that dvh and svh are getting support! Thanks for covering this! :D

@VivekTR Год назад

I've faced many of these problems. A lot has been clarified in this video. Thank you, Kevin!

@yarrrno Год назад

This exact header 100vh issue on mobile. arghhhh. I think i asked about it like 6 months back on your discord channel. There was so little info on web about the new units. Was super happy to see this video. Now its way more clear how to make use of the new units. Truely appreciate your work, thanks in behalf of the whole world :D

@andrewc95 Год назад

Couldn't fall back to sleep so I've been flipping back and forth between you and Web Dev Simplified. You guys make great videos. I'll definitely have to come back to this one when I'm working on my projects.

@youngun550 Год назад

This is awesome. Good job Kevin. I'm very grateful for all of your excellent content!

@danielguzman8607 Год назад

This is the first video I watch from your channel and I can say, with absolutely no doubt, that I just became your fan, man! Thanks!

@timseguine2 Год назад

I used to do full-stack dev but quit back when IE7 support was still a thing that people sometimes had to do. I enjoy how much better things have gotten with decent html5 and css features, but my "oldschool" brain sometimes has trouble with the stuff we could never really use like this. It is great to have videos like this that distill the quirks down into manageable chunks without hours of experimentation.

@cerealrakist7360 Год назад

Same!!

@ongke3655 Год назад

IE should be excluded from the world. Even IE10 or 11

@timseguine2 Год назад

@@ongke3655 support these days is completely unnecessary. But this was coming from back in the day when it still had 10%-20% market share. Not supporting that was basically just bad business back then.

@fernlovebond Год назад

Damn! You always teach me fascinating things, and make me want to tinker and play. Thank you for giving such clear ideas about how the various rules work. You're so awesome at this.

@hruthikg6735 Год назад

Wow 2 days back i was searching for this !!! 😂❤️ Great one

@boheeatelier6681 4 месяца назад

Great! I have just enrolled for the free course. I learn so much from your videos and I just love playing with CSS, so fun!

@christian-schubert Год назад

Now, haven't been excited about a CSS topic probably since CSS grid came up - since when have 'svh' units been a thing?! (Also, how could I ever miss this?!) This LITERALLY IS a gamechanger - developing for those collapsing addressbars has always been SUCH a nuisance - thanks Kevin! 👍

@KevinPowell Год назад

They're relatively new, so do keep an eye on browser support, though it is pretty decent!

@qzbnyv Год назад

Thank you RU-vid algorithm for bringing me to this amazingly useful channel 👏👏 And thanks Kevin 👏

@qzbnyv Год назад

oops though that was a top-level comment. oh well

@thedigitalceo Год назад

It’s so sad that there’s still no real solution for 100vh on mobile. svh also doesn’t seem supported by iPhone Safari which is what our clients complain about the most.

@heyjakeay Год назад

@@thedigitalceo It works on 15.4 onwards according to CanIUse, so you could set it to 100svh and then also declare 100vh as a fallback if it isn't supported by the browser (with a padding hack as well)

@fiddle_n Год назад

I've started web dev this year (through the Odin Project, which is how I found your channel incidentally!) and Issue 2 was the bane of my life last week. What's worse is that most Google results don't include svh at all - I had to *really* look to find it. But wow is it a great unit to use.

@haxmero4413 Год назад

Love the video 👍 A good summary of the issues and solutions that everyone should be aware of

@juliapaulucci Год назад

I JUST WANNA SAY... I LOVE YOU......... IVE BEEN SEEKING FOR THE SOLUTION OF THIS PROBLEM FOR A LONG TIME WHEN I SAW YOUR VIDEO AND BAMM!!! SOLVED!!! THANK YOU!!!!!

@urbanpuma9136 Год назад

Straight to the point and well presented - perfect 👌

@grymmjack Год назад

Thanks for the video. Subbed. I used to do a lot of web design, but haven't in ages. While things have definitely improved since those days, it's a little crazy to see the struggles with the same old problems on new tech. Will use your channel to get back up to speed. Appreciate your approach/method/sharing/pace/explanation/allthethings.

@melissabazany2363 Год назад

Perfect timing for this, thank you, as always

@Sanguine830 10 месяцев назад

Exactly what I needed! Thanks for this video, it’s the best

@ClashRoyale-pt9zj Год назад

wow, i've never known anything about that "svh" unity, it's an incredible solution for a lot of projects that could have problems like the showed on the video, thx kevin!

@corydhmiller Год назад

Hey Kevin! Nice shirt 😁🤘 just wanted to say thanks for the clearness of your videos, always find myself learning new things every time.

@lolitukas89 Год назад

Kevin, you are a golden find

@proffelipesilva Год назад

Once again bringing accessibility issues. Thank you so much for this. Respect + 🤟🏻

@dandejy6520 8 месяцев назад

Your videos are always very helpful. 👍

@pertreyu9579 Год назад

Man this was extremely informative. I definitely have used view port values a lot in the past..

@GroovyMMA Год назад

Thank you! Love your professionalism

@DaleRogers Год назад

Great video. I'm investigating CSS functions now. Thanks.

@woodrunsdeep Год назад

I don't use vw for everything but sometimes I see people doing so. Now I'll give these people the link to this video :) Thanks Kevin!

@karlo2116 Год назад

Hi kevin , its really amazing that I have a problem in my code and in the NEXT DAY you make a video about my problem, happened already like 7 times

@neoweiter Год назад

Very good video ! Thanks for your always great work

@ichiroutakashima4503 Год назад

I thought this was a contradictory post from one of your contents, glad to learn this was kind of a continuation about dynamic viewports. I stopped using viewports and started using dynamic viewports because of your videos.

@erfanvatanparasti2949 Год назад

You are number 1 and my best teacher! 👍

@greedyboi011 Год назад

Absolutely game changing!

@CoryTheSimmons Год назад

Super helpful. Great channel!

@fredbcruz 6 месяцев назад

Pretty on point. I liked this style

@JPNK13 Год назад

Are you using something like Nvidia's Eye Contact feature? Around 1:40 your eyes suddenly change and it stood out to me. I appreciate the content either way! Thanks for uploading.

@vokhactri Год назад

i also spot that weirdness

@trubnikov Год назад

That was scary as shit!

@g-pg Год назад

Earlier today I was wondering how to fix a problem with an element not showing properly on mobile because of the 100vh differences between devices. Thank you very much Kevin!

@joshuaheathcote2116 Год назад

I was wrestling with this the other days, so happy to hear this because now it makes sense.

@muhamadsarhad6566 9 месяцев назад

wonderful video as always

@mkontent Год назад

Oh wow, you only just uploaded. Great video!

@dariokartal9453 Год назад

Hella good video. Subscribed.

@pazdyyy Год назад

Thank you sir for the SVH value trick 👌🏻😊

@obsessedprogrammer700 Год назад

Thanks to Kevin, now everything I say or do has 'awesome' in it.

@gwnima1 Год назад

Awesome video. Thank you.

@frankroos1167 Год назад

So far I have only used viewport units on pages that fill the viewport exactly on regular screens, either landscape or portrait. For that use-case it works pretty well. For other use-cases I have never considered them, not because of the problems it may cause, but because the alternatives I did use came more natural. min/max/clamp are so good. And combining them with container-query-units is awesome.

@nevyanplamenov5409 11 месяцев назад

Thank you for sharing about container query units, i study responsive design right now and i had no idea those even existed...

@johanneswijaya5384 Год назад

Thanks man! dvh saved my life

@ardasevinc4 Год назад

Very helpful tips especially with 100vw. One of the points I tackle through with every project...

@clebsgaming92 Год назад

omg thank you so much for the "100svh" tip. In my case it's a sidebar which must have the exact same height as the viewport but on tablets it was having that same issue.

@jasonhowells7974 Год назад

@kevinpowell although the footer is not sticky "stays at the bottom" I use flex: 0 auto in the first div bellow the body, then once the content inside goes beyond the height it can initially display the footer will be at the bottom of the content. to me it's not good design to keep a footer in view, as it's taking up space all the time. Always appreciate your work Kevin.

@VasilyPavlik Год назад

Thanks a lot! As usual I found your video awesome. (Gone to remove all 100vh from style.css files) :)

@electronicmusicartcollective 6 месяцев назад

MY CSS GURU!!! THANK YOU!

@mike5904 Год назад

Hi Kevin, You now have around 600k more subscribers since writing the sign up page for the course 👍. Thanks for the relatable, real world content.

@emmavdev Год назад

omg thank you so much, I have the problem with 100vh height in my project and the svh is probably gonna fix it!! Thank you!

@cabezachumbosampedro8038 Год назад

This is useful. Thanks.

@utekk Год назад

Thx for another usefull info :)

@vasyaqwe2087 Год назад

thanks Kevin for another great video. Good to know you're telling people about your courses here too now. More people should learn from you, I feel like there's no one better in this field than you

@francescapizzighini3014 Год назад

THANKS. I think I just found a great problem in my project

@charlestonmiszczak5009 Год назад

Excellent. I always want to know some solution to this problems

@ankurpathak108 Год назад

Hey Kevin , thanks for the detailed information about View ports 😊 By the way can please explain the clamp() function in detail in a video ?

@KevinPowell Год назад

Already have one :D - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-U9VF-4euyRo.html

@dariokartal9453 Год назад

What clamp() does, I used to do with calc() combined with css variables for min and max.

@lawryyXD Год назад

This was amazing to learn about, I've just been using the h-full (100%) trick, will try out the svh way! Thanks

@James-zr1lu Год назад

Nice mate, keep it up.

@mr_possible6197 Год назад

Loved it !

@AbbassyProductions Год назад

I can see the NVIDIA Broadcast! Amazing content by the way. I do web design on the side and you have helped me so much! Thanks alot

@kdmadej Год назад

For a moment I thought I was going crazy 😅

@kieranbarker1902 Год назад

Loving the Nathan Barry shirt! 👕

@nocodekevin Год назад

I build with a mix of units and than run a PX to REM convertor before running final checks on my responsiveness. I've found that's working for me as I get more involved with Accessibility and working with multiple developers.

@dimitridovgan6364 Год назад

Great 👍 Thank you!

@natarajanraju4198 6 месяцев назад

Love your content

@skyvibe1818 Год назад

Oh using AI eye tracking are we? 😆 Great content as always!

@Ultrajuiced Год назад

1:40?

@keaton718 Год назад

Thanks, I didn't know about dvh or svh. It's scary that Google/RU-vid knew I needed to see this video...

@handsome_man69 Год назад

Happy birthday belinda!!

@TheTirailleur Год назад

I like those analytics vidéos !

@zoirjonabduvohidov2897 4 месяца назад

very very usefull info nj

@dienazty8820 Год назад

Great video as always! QQ - do you use any software for eye contact? There are some weird artifacts in the video ~1:36 and ~1:42 where your pupils shift noticeably.

@mdibrahimkhalil2847 Год назад

Thank you my dear sir

@dabbopabblo Год назад

That 100vh part was very useful because I want the comment section on videos on my site to be off screen until scrolled so the comments don’t need to be loaded unless a user scrolls to see them

@stokeley4l Год назад

needed this

@code.cracking Год назад

Thank you very much

@shubhamsaini4871 Год назад

RU-vid recommend me this today. And I can't stop my finger to subscribe him.

@sweethomes674 11 месяцев назад

Excellent 😊

@brandonwhite5139 6 месяцев назад

Hello Professor KP! 😇 I am studying UX Design. Longtime artist trying to figure out front-end development. I liked your videos right away as soon as I noticed have you kept your profile in a circle frame. Plus you kept looking back towards the camera. You must be a writer. Funny thing. I watched/listened to a couple of your videos on 1.5 and 2 playback speed.

@uimonk 5 месяцев назад

ur a superhero!!

@cosanostraytc1030 Год назад

Great tutorial man keep it up!!! Some time ago you made a tutorial about using 100vw inside a container which its width was like 960px or something, but the 100vw was not affected by the container. Can you please share that video? Thanks

@serychristianrenaud Год назад

Thank 👍

@diegoavendanohernandez9908 11 месяцев назад

you're the man

@Akimb321 Год назад

Regarding the 100vw producing scrollbar - I think it's not because the vw does not take into the account the scrollbar, but because (in case of body) there is already some margin applied on it. The scrollbar disappears when the margin is removed

@nervousstate Год назад

This exactly too.

@calyodelphi124 Год назад

Yeah, this. Exactly this. When sizing elements, the default behavior is to apply the sizing only to the content area, which only includes the content itself and ignores padding, borders, and margins. You can include the padding and borders in your element sizing by declaring "box-sizing: border-box;" but then that still leaves the margins left over. You have to also set "margin: 0;" and then things should work.

@alv1137 10 месяцев назад

You're right, i used to follow and i got better results.

@andrefig822 9 месяцев назад

This is only true for mobile browser/devices. Desktop 100vw DOES produce a scrollbar as of 2023. Chrome is in the works to provide a solution for that, it had a custom flag to enable overlay scrollbar until a few time ago. There's one hacky solution though: "width: calc(100vw - (100vw - 100%))", but I can see a case where you would want a 100vw instead of 100% through parent-child elements.

@MrRafaturtle Год назад

Great video. Could you point me in the direction of doing a Trello or Jira style column scroll without using vh? I've struggled with and without I guess.

@nomsoikem5292 Год назад

Thanks so much for this. I was wondering why my sidebar with 100vh was being cut off on mobile browsers

@atheisttttt Год назад

GOAT CSS Master

@souhardyasaha6615 Год назад

I use vh to make objects dead center. Like if I want to center a login form in a login page I use height: 100vh for the body of the page. Is there any better way to center objects?

@albuslrc Год назад

Thanks!

@keviincosmos Год назад

svh! What a life saver ❤️

@user-lq7xz1th4x Год назад

You are spectacular

@Kleyguy7 Год назад

1:41 there is an eye glitch on Kevin face. Pretty interesting times we live in :)

@ricardohernandez2771 Год назад

Gracias!

@Dcookies100 11 месяцев назад

Do you use some software for your eyes? What was that at 1:40?

@rproctor83 7 месяцев назад

I always set my body elements to flexbox column with a min-height: 100vh, then align my footer to the bottom with the content area set as flex grow. Seems to work well.