Responsive Typography with CSS Clamp

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

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

  • @dzsuvi
    @dzsuvi 4 месяца назад +5

    Never used clamp before because I didn't understand how it work. I do now. You've got a new sub! Thanks

  • @CrispyCircuits
    @CrispyCircuits 4 месяца назад

    I had no idea how to set the middle value despite seeing it used in many videos. All clear now. Liked and subscribed now. Don't let me down, keep me properly sized. 😜

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

    i was always confsed as to how clamp worked, but i found this channel, now it all makes sense .... you got a new sub

  • @elAmigo805
    @elAmigo805 4 месяца назад +2

    Awsome, this solves an issue I was having. Thanks

  • @ClarkeDesign
    @ClarkeDesign 5 месяцев назад +4

    Should you not be using rem or em instead of px for the max and min sizes?

  • @bigpunchline
    @bigpunchline 9 дней назад +1

    really helpful!

  • @thexpand
    @thexpand Год назад +17

    Great video. I have a few suggestions, though - it would be better to use 1rem + 8vw for the second argument of the clamp function to be able to scale the text depending on browser zoom or user preferences for font size. Also, the same goes for using rems instead of pixels (in your case 50px and 100px would probably be best replaced with non-fixed values).

  • @koresaliva
    @koresaliva 6 месяцев назад +1

    Extremely helpful thank you!

  • @mikhaillav
    @mikhaillav 6 месяцев назад +1

    Thank you so much! Really helpful ✌️

  • @johan.svensson
    @johan.svensson 6 месяцев назад +1

    Great tutorial. Thank you.

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

    Best video so far

  • @dileepbatchala1590
    @dileepbatchala1590 Год назад +2

    If it is single line clamp function is ok, but when the text is in multiple lines what about the line height? It should also change accordingly.

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

    Awesome video. Thank you so much.

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

    I wonder if there is a way to create a 'reverse clamp' for vw? On a desktop, I might want the website logo to be 10vw but on mobile I'd want it 20vw. I haven't found any solution as yet.

  • @ChiragEmpyreal
    @ChiragEmpyreal 10 месяцев назад +1

    thanks for this.

  • @ooomb6439
    @ooomb6439 5 месяцев назад +1

    thankyouu bro you got a sub

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

    Interesting new thing, thank you 🤙

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

    it is a very good video one of my favorites

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

    Brother what about the line height?

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

    which using vs cde theme?

  • @magatsu82
    @magatsu82 4 месяца назад +1

    Try to zoom in or out now.... font will remain the same size, don't use vw alone and px are not a good way to set font sizes, use rem or em

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

    Font clamp not working for samsung galaxy mobiles

  • @OCEMTechZone
    @OCEMTechZone 11 месяцев назад +1

    Great 🎉

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

    stupid question: this will work for any font?

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

      yes and not just font

    • @darkman237
      @darkman237 10 месяцев назад +1

      @@oliseoseji8868I wasn't able to get it to work on firefox, latest version.

  • @juanortegaa6916
    @juanortegaa6916 Год назад +2

    Did you take this from Kevin Powell ??

  • @scottonanski4173
    @scottonanski4173 9 месяцев назад +15

    Okay, great! Now use this in a real-world development example where you have 3 monitor sizes; 1920 x 1080, 3840 x 1600, and 5120 x 2800. Use this on containers, headers, footers, etc. It's not as easy are you making it out to be.

    • @codobyte
      @codobyte 3 месяца назад +1

      And I would like to add pixel-ratio for retina screens!
      If someone can give me a solution how to do that?

    • @iJuce
      @iJuce 3 месяца назад +1

      Note how he didn’t even respond😂 he can’t be bothered

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

      Should I use userAgent and dppx?

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

    Can I use clamp and media query at the same time?

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

    Font clamp size not working different devices pls tell the solution sir .....

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

    not a single RUclipsr shows how such typography works for text at least in 2 lines, everyone takes 2-3 words and says wow look one line...
    In real examples you will have to add another media query to edit the font sizes otherwise they may be smaller than they could be...
    The video is just clickbait! There is no solution for fonts in one line!

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

    Wasting too much of time in video instead ( Get inspired from @Fireship )

  • @Shahriyor00
    @Shahriyor00 2 месяца назад +1

    speak a little slow

    • @naveenb2260
      @naveenb2260 6 дней назад

      0.5x will be better for u