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

Поділитися
Вставка
  • Опубліковано 14 гру 2024

КОМЕНТАРІ • 43

  • @KnightToD5
    @KnightToD5 Рік тому +38

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

    • @bashehu
      @bashehu 3 місяці тому

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

  • @Alex-nu4cb
    @Alex-nu4cb 11 місяців тому +4

    Very well-made video. Thank you. #OdinArmyStayStrong

  • @RRehanashraf
    @RRehanashraf 8 місяців тому +3

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

    • @ayoub7558
      @ayoub7558 8 місяців тому +1

      me too how are you doing so far

    • @RRehanashraf
      @RRehanashraf 8 місяців тому

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

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

  • @timemmanson8350
    @timemmanson8350 9 місяців тому +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. 🖤

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

  • @timothygbadegesin4673
    @timothygbadegesin4673 10 місяців тому

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

  • @tech_manuel5903
    @tech_manuel5903 10 місяців тому +3

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

  • @tsubimekdeinmansubimekdein3898

    You are powerful Steven.

  • @Kamil-rf5qn
    @Kamil-rf5qn 5 місяців тому

    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!

  • @carbastan6605
    @carbastan6605 Рік тому +1

    great job! thank you so much!

  • @o.n.edozien2386
    @o.n.edozien2386 3 роки тому +1

    Very useful tutorial!

  • @johnaweiss
    @johnaweiss Рік тому +1

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

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

  • @KelvinWKiger
    @KelvinWKiger 3 роки тому +1

    Thank you ! 🍀

  • @ViliCodes
    @ViliCodes Місяць тому

    Shoutout to everyone on the odin project 🔥

  • @Smile__007
    @Smile__007 Рік тому

    Nice content 👍🏾

  • @fluttterdev1k
    @fluttterdev1k 4 місяці тому

    thanks master

  • @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 - ua-cam.com/video/LCezax2uN3c/v-deo.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!

  • @quangtoanta8577
    @quangtoanta8577 3 роки тому

    Thanks you!

  • @abdulaziz7013
    @abdulaziz7013 3 роки тому

    Great! Thanks

  • @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 - ua-cam.com/video/LCezax2uN3c/v-deo.html - and vote for the ones that are already there.

  • @biswabaral949
    @biswabaral949 Рік тому

    always keep the minumum value less than 300px

  • @scottonanski4173
    @scottonanski4173 7 місяців тому

    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