Using the CSS Numeric Functions - min, max, calc, clamp, and minmax

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

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

  • @KnightToD5
    @KnightToD5 11 месяцев назад +37

    The Odin Project brought me here. Thanks for your video.

    • @bashehu
      @bashehu 2 месяца назад

      I have a habit of researching about a topic before I start learning, and It happens coincidentally this tutorial is part of the resources 😄

  • @RRehanashraf
    @RRehanashraf 7 месяцев назад +3

    The odin project brought me here, very well explained sir! keep up the good work

    • @ayoub7558
      @ayoub7558 7 месяцев назад +1

      me too how are you doing so far

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

      @@ayoub7558 doing good let's do it together?

  • @Alex-nu4cb
    @Alex-nu4cb 10 месяцев назад +4

    Very well-made video. Thank you. #OdinArmyStayStrong

  • @DarkReaperK97
    @DarkReaperK97 Год назад +3

    Thank you very much Professor. I had no clue at first how it worked, why it sometimes got big and why it didn't. I do now all thanks to you. Much appreciated!

  • @tech_manuel5903
    @tech_manuel5903 9 месяцев назад +3

    I'm here from the odin project. I'm hoping to make good use of it.

  • @timemmanson8350
    @timemmanson8350 8 месяцев назад +2

    The odin project! Let's keep going!

  • @darkpain4208
    @darkpain4208 2 года назад +1

    Mr. Steve, we really can't thank you enough for the the exceptional explanations you provide us. Thanks to you, I have better understanding of min() and max(); really never thought I would understand it. 🖤

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

    Well explained and practically demonstrated. Thanks for sharing your knowledge on this one.

  • @Kamil-rf5qn
    @Kamil-rf5qn 4 месяца назад

    Anyone else from Odin remember the first videos with Odin comments having 3-5k likes? And here we see 30! If you're here this is a sign, you are in the minority of dedicated people who are putting in the work! PAT YOURSELF ON YOUR BACK!

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

    Very appreciated, i requested for this. Didn't have a hope that my wish may come true. And to all people who's watching this first watch the video width,max-width,min-width from this channel(Steve u might wanna pin it in the description since it has really close meaning to min max) then min max will be very easy. And again tnx steve i realy used ur width video and gonna study calc and minmax() and min in this video

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

    the best web dev channel on youtube ! thanks!!!!!

  • @tsubimekdeinmansubimekdein3898

    You are powerful Steven.

  • @ViliCodes210
    @ViliCodes210 13 дней назад

    Shoutout to everyone on the odin project 🔥

  • @carbastan6605
    @carbastan6605 Год назад +1

    great job! thank you so much!

  • @johnaweiss
    @johnaweiss Год назад +1

    5:39 "Kind of like"? Or exactly like?

  • @o.n.edozien2386
    @o.n.edozien2386 3 года назад +1

    Very useful tutorial!

  • @c__beck
    @c__beck 3 года назад +2

    When using clamp, the middle variable should always include rem or em to make it accessible. Otherwise users who either change the default font size or zoom won’t be able to adjust the font size to their needs. Regardless of zoom level or font size, 4vh never changes.

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

    really appreciate this. Thanks 👍

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

    great,please can you make tutorial for chrome extension using reactjs

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

      Please post any tutorial requests in the comments here - ruclips.net/video/LCezax2uN3c/видео.html - for me to track and see people voting on them.

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

    Hello Steve, just watching along with you and right off the bat would like to understand why you select vh for font-sizing and not vw? Is this standard and could vw be used instead, or is this just a no no? I hope you can get to answer me - thanks

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

      You can use either. When calculating font sizes you just have to take into account the form factor of what your user is using - laptop, tablet, phones. They all have different aspect ratios and you need to account for that in your styles. Media queries can be used to get different aspect ratios. This is meant as a basic example, not a finished production ready stylesheet.

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

      @@SteveGriffith-Prof3ssorSt3v3 Hello Steve, I appreciated the response - thank you!
      To explain, I came to your channel, looking to find out some more about this method, precisely for the purpose of using it in live projects. I think it's fair to say this is probably the same reason anyone else who visits information channels like yours, although I agree you'd have to be a little bit nuts to implement it right away, after watching just one instructional video. I've also read up about using clamp on the major CSS sites, watched other videos and had never seen Vh used before, which threw me. But it's good to have seen it, so I can evaluate it when I come to test this out in further research. BTW, I also came across a modular typescale using CALC, which is interesting, since it achieves the same end result, without the downside of only 90% browser support. I am just researching it all, before implementing it - I have to assume users will view on the whole spectrum of devices as I have no way of knowing this for sure.
      Thanks again for the quick response and explanation - Peace!

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

    Thank you ! 🍀

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

    Nice content 👍🏾

  • @fluttterdev1k
    @fluttterdev1k 3 месяца назад

    thanks master

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

    Sir, pls make a video on fit-content and fit-content ().

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

      Please add requests in the comments here - ruclips.net/video/LCezax2uN3c/видео.html - and vote for the ones that are already there.

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

    Thanks you!

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

    Great! Thanks

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

    always keep the minumum value less than 300px

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

    But this doesn't really explain how it works which leaves gaps in the knowledge of the people trying to understand HOW this works. Welp, time to go look for another video.

  • @ro3843
    @ro3843 2 года назад +2

    i have nothing against kevin powell and webdevsimplified (kyle) - they're both great people for sharing so much knowledge --- but really, your videos are the easiest for me to follow and learn from. thanks again for posting all this css goodness