The problems with viewport units

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ม.ค. 2025

ความคิดเห็น • 416

  • @potrosanjuan
    @potrosanjuan ปีที่แล้ว +8

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

  • @jasonoconner7863
    @jasonoconner7863 ปีที่แล้ว +60

    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
      @NotJayG ปีที่แล้ว +6

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

    • @studyalot596
      @studyalot596 6 หลายเดือนก่อน +1

      the body element is already full width so just doing "width: 100%" always works. and yeah chatgpt is good at coding but it is not good at CSS at all for some reason..

  • @Brunoenribeiro
    @Brunoenribeiro ปีที่แล้ว +156

    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
      @bobwilkinsonguitar6142 ปีที่แล้ว +9

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

    • @emp5920
      @emp5920 หลายเดือนก่อน

      @@bobwilkinsonguitar6142 😆me rn

  • @developerpranav
    @developerpranav ปีที่แล้ว +42

    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

  • @timseguine2
    @timseguine2 ปีที่แล้ว +55

    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
      @cerealrakist7360 ปีที่แล้ว

      Same!!

    • @ongke3655
      @ongke3655 ปีที่แล้ว +2

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

    • @timseguine2
      @timseguine2 ปีที่แล้ว +2

      @@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.

  • @JPNK13
    @JPNK13 ปีที่แล้ว +23

    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
      @vokhactri ปีที่แล้ว +4

      i also spot that weirdness

    • @trubnikov
      @trubnikov ปีที่แล้ว +2

      That was scary as shit!

    • @gerunkwon2598
      @gerunkwon2598 4 หลายเดือนก่อน

      reptilian kevin

  • @juliapaulucci
    @juliapaulucci ปีที่แล้ว +1

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

  • @FeresVocalArts
    @FeresVocalArts ปีที่แล้ว +8

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

  • @fiddle_n
    @fiddle_n ปีที่แล้ว +20

    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.

  • @christian-schubert
    @christian-schubert ปีที่แล้ว +70

    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
      @KevinPowell  ปีที่แล้ว +22

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

    • @qzbnyv
      @qzbnyv ปีที่แล้ว +1

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

    • @qzbnyv
      @qzbnyv ปีที่แล้ว

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

    • @thedigitalceo
      @thedigitalceo ปีที่แล้ว +1

      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
      @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)

  • @yarrrno
    @yarrrno ปีที่แล้ว +1

    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

  • @VivekTR
    @VivekTR ปีที่แล้ว +4

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

  • @boheeatelier6681
    @boheeatelier6681 11 หลายเดือนก่อน

    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!

  • @Fowler9525
    @Fowler9525 2 หลายเดือนก่อน

    Thank you kevin, I spent a lot of time to know the reason why I am getting that scroll bar even I used 100vw, yet you saved my time in the future.

  • @danielguzman8607
    @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!

  • @g-pg
    @g-pg ปีที่แล้ว +2

    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!

  • @woodrunsdeep
    @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!

  • @ClashRoyale-pt9zj
    @ClashRoyale-pt9zj ปีที่แล้ว +1

    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!

  • @andrewc95
    @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.

  • @GroovyMMA
    @GroovyMMA ปีที่แล้ว

    Thank you! Love your professionalism

  • @frankroos1167
    @frankroos1167 ปีที่แล้ว +2

    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
      @nevyanplamenov5409 ปีที่แล้ว +1

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

  • @hruthikg6735
    @hruthikg6735 ปีที่แล้ว

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

  • @FernLovebond
    @FernLovebond ปีที่แล้ว +1

    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.

  • @joshuaheathcote2116
    @joshuaheathcote2116 ปีที่แล้ว

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

  • @melissabazany2363
    @melissabazany2363 ปีที่แล้ว

    Perfect timing for this, thank you, as always

  • @lolitukas89
    @lolitukas89 ปีที่แล้ว

    Kevin, you are a golden find

  • @ankurpathak108
    @ankurpathak108 ปีที่แล้ว +16

    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
      @KevinPowell  ปีที่แล้ว +15

      Already have one :D - th-cam.com/video/U9VF-4euyRo/w-d-xo.html

    • @dariokartal9453
      @dariokartal9453 ปีที่แล้ว +1

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

  • @youngun550
    @youngun550 ปีที่แล้ว

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

  • @Sanguine830
    @Sanguine830 ปีที่แล้ว

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

  • @ichiroutakashima4503
    @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.

  • @karlo2116
    @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

  • @obsessedprogrammer700
    @obsessedprogrammer700 ปีที่แล้ว

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

  • @heitoreleuterio4826
    @heitoreleuterio4826 ปีที่แล้ว

    wow man, this video was exactly what I was looking for. My last project was almost 100% made with view port units. In this project it was`t a huge problem, because the target of the web site is PC/Laptops but I`m really excited to watch your course and learn the best practices. Doing layouts/UI/UX is the sort of thing that I`ve to do every day but hate every time I`m doing, and these type of video are really great to learn boring things with a dynamic explanation. thanks man =)

  • @corydhmiller
    @corydhmiller ปีที่แล้ว

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

  • @grymmjack
    @grymmjack ปีที่แล้ว +1

    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.

  • @pertreyu9579
    @pertreyu9579 ปีที่แล้ว

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

  • @clebsgaming92
    @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.

  • @Londonesify
    @Londonesify ปีที่แล้ว +89

    Are you using the AI tool for eye contact?

    • @tHeplAyiER
      @tHeplAyiER ปีที่แล้ว +14

      Haha I looked for this comment - had the same feeling xD

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +53

      Was testing it out, but I've stopped cause it's a bit glitchy :D

    • @anuvette
      @anuvette ปีที่แล้ว +7

      Now that u said it, it's so uncanny and I can't unsee it anymore 😭

    • @harshbhardwaj6060
      @harshbhardwaj6060 ปีที่แล้ว +2

      It was distracting me a lot

  • @erfanvatanparasti2949
    @erfanvatanparasti2949 ปีที่แล้ว

    You are number 1 and my best teacher!
    👍

  • @haxmero4413
    @haxmero4413 ปีที่แล้ว

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

  • @urbanpuma9136
    @urbanpuma9136 ปีที่แล้ว

    Straight to the point and well presented - perfect 👌

  • @Dcookies100
    @Dcookies100 ปีที่แล้ว +1

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

  • @dabbopabblo
    @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

  • @Akimb321
    @Akimb321 ปีที่แล้ว +43

    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
      @nervousstate ปีที่แล้ว +2

      This exactly too.

    • @calyodelphi124
      @calyodelphi124 ปีที่แล้ว +1

      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.

    • @Najib_Hossain
      @Najib_Hossain ปีที่แล้ว

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

    • @andrefig822
      @andrefig822 ปีที่แล้ว +1

      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.

  • @dandejy6520
    @dandejy6520 ปีที่แล้ว

    Your videos are always very helpful. 👍

  • @dotterel
    @dotterel ปีที่แล้ว +1

    I literally just put this into my code, alt tabbed and saw this thumbnail, went back to my code and deleted it, then pressed play and said to myself, "don't worry, Kev, i'd never."

  • @nocodekevin
    @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.

  • @DaleRogers
    @DaleRogers ปีที่แล้ว

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

  • @fredbcruz
    @fredbcruz ปีที่แล้ว

    Pretty on point. I liked this style

  • @AbbassyProductions
    @AbbassyProductions ปีที่แล้ว +3

    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
      @kdmadej ปีที่แล้ว +1

      For a moment I thought I was going crazy 😅

  • @keaton718
    @keaton718 ปีที่แล้ว

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

  • @dienazty8820
    @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.

  • @Kleyguy7
    @Kleyguy7 ปีที่แล้ว +3

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

  • @proffelipesilva
    @proffelipesilva ปีที่แล้ว

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

  • @matheuschaves6254
    @matheuschaves6254 ปีที่แล้ว +1

    Hello! Why do I need to do "5vw + 1rem" instead of just "5vw"? 10:35
    I didn't understand :(

    • @noctemcat_
      @noctemcat_ ปีที่แล้ว +2

      Without it zooming wouldn't work. 1rem is the unit that gets increased or decreased when zooming, so without it your font size would have been just clamped 5vw

    • @matheuschaves6254
      @matheuschaves6254 ปีที่แล้ว

      ​@@noctemcat_ Thanks! But testing here with clamp(5rem, 10vw + 3rem, 10rem) or clamp(5rem, 10vw, 10rem), the zoom works the same in both cases. :/
      Testing without clamp really is a problem, but when using clamp, doesn't matter if I use +rem or not.
      edit: I realized the zoom works, but doesn't works properly... so we have to use +rem. Thank you!

  • @skyvibe1818
    @skyvibe1818 ปีที่แล้ว +11

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

  • @CoryTheSimmons
    @CoryTheSimmons ปีที่แล้ว

    Super helpful. Great channel!

  • @greedyboi011
    @greedyboi011 ปีที่แล้ว

    Absolutely game changing!

  • @jasonhowells7974
    @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.

  • @vasyaqwe2087
    @vasyaqwe2087 ปีที่แล้ว +3

    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

  • @yufgyug3735
    @yufgyug3735 ปีที่แล้ว +39

    for how widespread and common those problems are, it is kind of shocking that there is still no easy way to overcome those.

    • @junsu-ho
      @junsu-ho ปีที่แล้ว +2

      well height is broken since the beginning, that's why align items vertically basically doesn't work without flexbox or grid

    • @pelly5742
      @pelly5742 ปีที่แล้ว +10

      Right? It's so baffling to me that native UI elements of the browser aren't taken into account when calculating the viewport.. it just makes no sense.

    • @kapenike
      @kapenike ปีที่แล้ว

      @@pelly5742 learn to use height:100% properly and youll never have to worry. old web dev is better for a reason. this guy seems scared of it, must not fully understand it ... 'little issues' means even he doesnt fully understand what hes doing

    • @Sammysapphira
      @Sammysapphira ปีที่แล้ว

      ​@@pelly5742because every browser has different native elements

  • @kieranbarker1902
    @kieranbarker1902 ปีที่แล้ว

    Loving the Nathan Barry shirt! 👕

  • @neoweiter
    @neoweiter ปีที่แล้ว

    Very good video ! Thanks for your always great work

  • @ardasevinc4
    @ardasevinc4 ปีที่แล้ว

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

  • @shubhamsaini4871
    @shubhamsaini4871 ปีที่แล้ว

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

  • @rproctor83
    @rproctor83 ปีที่แล้ว +1

    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.

  • @aoe2geek
    @aoe2geek ปีที่แล้ว

    This was a roller coaster of emotions for me.
    “Yeah this thing has problems but you can use this to fix it. But actually it has problems too so maybe try this. And actually…”
    😂

  • @udlx
    @udlx ปีที่แล้ว +1

    Sidenote: What's up with your camera? Check 0:31-0:38. There is a strange eye distortion going on where it almost looks like one of those Nvidia eye tracking demos gone wrong

  • @dariokartal9453
    @dariokartal9453 ปีที่แล้ว

    Hella good video. Subscribed.

  • @mkontent
    @mkontent ปีที่แล้ว

    Oh wow, you only just uploaded. Great video!

  • @souhardyasaha6615
    @souhardyasaha6615 ปีที่แล้ว +2

    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?

  • @electronicmusicartcollective
    @electronicmusicartcollective ปีที่แล้ว

    MY CSS GURU!!! THANK YOU!

  • @johanneswijaya5384
    @johanneswijaya5384 ปีที่แล้ว

    Thanks man! dvh saved my life

  • @francescapizzighini3014
    @francescapizzighini3014 ปีที่แล้ว

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

  • @emmavdev
    @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!

  • @brunoandradebr
    @brunoandradebr ปีที่แล้ว +4

    0:18 are u using some software in your eyes ? your eyes take some jumps through the entire video =s

  • @mrwolfieson3986
    @mrwolfieson3986 ปีที่แล้ว +1

    Did anyone else see the strange flickering in his eyes at 1:35 ??
    Genuinely confuses tf out of me

  • @brandonwhite5139
    @brandonwhite5139 ปีที่แล้ว

    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.

  • @pazdyyy
    @pazdyyy ปีที่แล้ว

    Thank you sir for the SVH value trick 👌🏻😊

  • @source144
    @source144 ปีที่แล้ว +2

    Can't you stare at us without AI, Kevin? lol @ 1:43
    But thanks for the video!

  • @lawryyXD
    @lawryyXD ปีที่แล้ว

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

  • @initiallytk
    @initiallytk ปีที่แล้ว +1

    Wait, are you using that NVIDIA Eye Contact thing (or something comparable) that makes your eyes look at the camera? Something's weird...

  • @jeankhouri
    @jeankhouri ปีที่แล้ว +1

    Are you using something to fix eye contact on your videos or are you AI? Great video!

  • @ShaunLevett
    @ShaunLevett ปีที่แล้ว +1

    I do use a utility class to make panels restricted to a container look like they are full viewport width (width: 100vw; margin-left: calc(50% - 50vw).
    I got it from an Andy Bell tutorial. I've not seen any horizontal scroll issues though. Could just put overflow-x: hidden on parent of course. Will have to chck this, but there's no other way to do this one really.

  • @charlestonmiszczak5009
    @charlestonmiszczak5009 ปีที่แล้ว

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

  • @VasilyPavlik
    @VasilyPavlik ปีที่แล้ว +1

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

  • @emilioclemente1987
    @emilioclemente1987 ปีที่แล้ว

    Could someone explain me why he adds + 1rem in the middle of clamp? 10:18

  •  ปีที่แล้ว

    Are you using Nvidia's face correction or eye tracking program?
    1:40

  • @gwnima1
    @gwnima1 ปีที่แล้ว

    Awesome video. Thank you.

  • @mike5904
    @mike5904 ปีที่แล้ว +1

    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.

  • @StevenDavisPhoto
    @StevenDavisPhoto ปีที่แล้ว

    I pretty much only use viewport units for dashboards that could be displayed on large tv's, or for setting 100% height on the page container. for the 100vw issue, you could just do overflow-x: hidden if u really needed to use it.

  • @dawidfrankiewicz8994
    @dawidfrankiewicz8994 ปีที่แล้ว

    8:34 - I have seen this vw font size/padding/margin thing too many times. I can't understand this, you can see all the problems when shrinking window to 300px width already, how can they keep doing this? Also you can see on wide screen how it is broken too, but for this you need wide screen or 2 screens to test at least.
    What bothers me the most is that if someone uses vw units it means they probably know modern CSS and it shows that they care about responsive design. So how in the world they are building websites like this? Using clamp for font sizes is usually enough, you can easily do websites that work from 200px to your max container width (on bigger screens browser zoom works great, at the same time makes website usable on ultrawide screens). Using vw units without clamp or min for anything is a bad idea. Using media queries is not a bad thing, no matter what you do, it almost never takes more than 3 media queries to make it work perfectly on every screen size and usually it is 1-2 queries.
    It works like that even if your container is 100% width (so for every screen size it will take exact same px width value as screen offers) which i like to do, so there is never empty space on sides on mobile devices. Mostly it comes from bootstrap css where containers are like 400px, 600px, 800px... fixed and nothing in between.

  • @mrtvakOnaj
    @mrtvakOnaj ปีที่แล้ว +5

    Thank you!!!
    Also your eyes creep me out, at 1:40 they're sketchy...

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +2

      Haha, I'd be testing something, but I've since stopped using it 😅

  • @James-zr1lu
    @James-zr1lu ปีที่แล้ว

    Nice mate, keep it up.

  • @Its-Just-Zip
    @Its-Just-Zip ปีที่แล้ว

    I'm glad I started playing around with HTML and whatnot after svh became a thing in the standards... Learned using them from day one. And I probably use them too much

  • @utekk
    @utekk ปีที่แล้ว

    Thx for another usefull info :)

  • @WebUser9098
    @WebUser9098 ปีที่แล้ว

    Kevin my friend, u don't need to add those strange eye filters @0:40 @1:19
    You look good as you are

  • @nekohz
    @nekohz ปีที่แล้ว +2

    svh's problem is, in android, virtual keyboard will also change the height... and this is inconsistent with iOS Safari's behavior

  • @euroger123
    @euroger123 ปีที่แล้ว +2

    Hey, great video!
    What about using:
    html, body {
    max-width: 100vw;
    overflow-x: hidden
    }
    I understand the vh can be problematic, but the vw on that use case is something I always use to avoid that some elements that are outside the window width make the horizontal scrollbar visible.
    I was wondering if there's another solution to that.

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +1

      But they are already full width, no reason to add that line in there. You could just have the `overflow-x: hidden` if you really need it, without the max-width.

  • @yot387
    @yot387 ปีที่แล้ว +3

    Hey Kevin.
    Are you using Nvidea's Eye Contact, right? Or some variant of AI eye to camera focus
    Cheers!

    • @asheaven1st
      @asheaven1st ปีที่แล้ว

      I think he is.. Glitched on 1:40-1:43

    • @0.lennart
      @0.lennart ปีที่แล้ว

      Yeah, thought the same

    • @PowerDown83
      @PowerDown83 ปีที่แล้ว +1

      It looks a bit scary if u ask me

    • @KevinPowell
      @KevinPowell  ปีที่แล้ว +4

      Haha, yeah, but I've stopped for new content, too many glitches