How to Use the CSS clamp Method

Поделиться
HTML-код
  • Опубликовано: 1 фев 2025

Комментарии • 48

  • @muhammedozalp
    @muhammedozalp 4 года назад +7

    Thank you Steve,
    It is nice to have someone like you that informs new features to us

  • @pritamchatterjee945
    @pritamchatterjee945 4 года назад +4

    Good alternative of media queries. Thanks maaan

  • @khaledoghli1894
    @khaledoghli1894 4 года назад +1

    you really did hard work to make videos for last technic 💙🌹

  • @osamaa.h.altameemi5592
    @osamaa.h.altameemi5592 4 года назад +4

    that was so smooth. It is a shame that you have only 35k subs you should have at least 1M. Wish you the best. By the way, is there any chance of you collaborating with Traversy Media, he is taking sometime off and is looking for a collab.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад

      One of my students sent him my channel link to have a look at. I've seen other people message him on Twitter about my channel. I would love to do a video for him.

    • @osamaa.h.altameemi5592
      @osamaa.h.altameemi5592 4 года назад

      @@SteveGriffith-Prof3ssorSt3v3 I will message him as well. Really love the way you teach. Best of luck for you.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад

      @@osamaa.h.altameemi5592 Thanks!

  • @DiegoAlencar8
    @DiegoAlencar8 4 года назад

    Didn't know about clamp()! Think I will use it a lot! Thanks!

  • @esraamohamed5601
    @esraamohamed5601 2 года назад

    Thank you so much for this educational video, I learned so much. Your work is very awesome. I really appreciate your hard work and your effort.

  • @bleulola
    @bleulola 4 года назад

    Than you so much, Steve!!! Learning so much from you

  • @shxdo3712
    @shxdo3712 Год назад

    Thanks for your tutorial

  • @shvideo1
    @shvideo1 3 года назад

    Very useful function and very well presented. Thank you.

  • @codydaniels9430
    @codydaniels9430 4 года назад +1

    Great tip, thanks!

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

    Hey, Steve...
    Can you give me a quick explanation of how you came to the determination that 1000px wide calculated to 5vh? That sort of went over my head.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  8 месяцев назад

      5vh is 5% of the 1000px was what I was referring to. I was just giving 1000px as an arbitrary value of the height of the webpage.

    • @scottonanski4173
      @scottonanski4173 8 месяцев назад +1

      @@SteveGriffith-Prof3ssorSt3v3 Oh. No wonder it didn't make sense to me. Thanks for taking the time to respond. I've been struggling with fluid typography for a few days now. I mean, I get it. But how to make it work in a real scenario has me struggling.

  • @joevidal8902
    @joevidal8902 2 года назад

    great tutorial. thank you so much

  • @abulfazlhaidary2002
    @abulfazlhaidary2002 4 года назад +1

    Thank you so much for your great explanation!!. by the way what theme and font you use for the VSCode??

  • @chikatikah3838
    @chikatikah3838 4 года назад

    Thanks Steve!

  • @rg-web-design
    @rg-web-design 9 месяцев назад

    Thanks. Is it possible to use a 'reverse' clamp, i.e; going from a small number on a wide screen to a larger number on a smaller screen, for either % or vw? TIA.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  9 месяцев назад +1

      You can use Calc to calculate a reverse scale for sizes

    • @rg-web-design
      @rg-web-design 9 месяцев назад

      @@SteveGriffith-Prof3ssorSt3v3 Thank you. I am a total CSS newbie. If I want a VW of 8 going to 22 in a viewport of 1280px to 380px, could you please show me an example of using the Calc feature? Thank you.

  • @Youssef-lv6wp
    @Youssef-lv6wp 4 года назад +1

    Thanks u so much sir

  • @rabindrajoshi9258
    @rabindrajoshi9258 3 года назад +1

    Using viewport sizes for minimum and maximum doesn't make much sense to me, maybe a little for flex-basis.
    Shouldn't it be used like my size is 20vw but I can't control how much (large/small) that is so clamp it in between 50px and 100px or other units that are independent on viewport?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад

      Sure you can do that absolutely. This was just meant as a simple example that is easy to visualize.

  • @perseveranse
    @perseveranse 3 года назад

    Clamp is fckn amazing !

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

    How about calc()? What is the difference?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  5 месяцев назад

      Clamp will compare the current value of the property to the range of values.
      Calc only calculates a value and returns it as the setting for the property.

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

      @@SteveGriffith-Prof3ssorSt3v3 Thank you 👍👍

  • @kareemradaideh7616
    @kareemradaideh7616 4 года назад

    I still don't see the point of clamp, shouldn't it be like @media? Where the text changes as viewport changes.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад

      clamp lets you create a default and a possible range for a single value.
      @media lets you define multiple class selectors for a wide range of possible conditions - aspect ratio, width, pixel density, etc. Very different things.

  • @soorajkj1564
    @soorajkj1564 4 года назад

    Why not my vscode doesn't support clamp🙄 it doesn't change the colour of clamp function when i hit save. . Please anybody help me

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад

      It has to do with whatever theme you are using. It's not a failure of VSCode.

    • @soorajkj1564
      @soorajkj1564 4 года назад

      @@SteveGriffith-Prof3ssorSt3v3 i am using Monokai++ theme . but it's changing the color on scss and not in live css compiler. whatever it is not working on my google chrome and firefox.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад

      @@soorajkj1564 it's fairly new. What versions of the browsers are you using. Check it against caniuse.com

    • @soorajkj1564
      @soorajkj1564 4 года назад

      @@SteveGriffith-Prof3ssorSt3v3 I test before. It's showing my version is supported.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  4 года назад

      @@soorajkj1564 Then there must be a mistake in something that you typed.

  • @zimani7g473
    @zimani7g473 4 года назад

    💯🎖️🔥

  • @_.sunnyraj._
    @_.sunnyraj._ 4 года назад

    Thanks

  • @mrx-qi8th
    @mrx-qi8th 3 года назад

    hi.could u do a video on min() and max() too?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 года назад +1

      Sure. Please add that request to the comments here - ruclips.net/video/LCezax2uN3c/видео.html

  •  3 года назад

    Thanks Steve!