3 modern CSS techniques for responsive design

A look at how we can use CSS comparison functions min(), max(), and clamp() for responsive layout techniques, plus a look at Utopia, a fluid type scale that we can use in our projects!

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:47 - widths with min()
02:53 - padding and margin with max()
06:50 - typography with clamp()
09:10 - fluid type scales with Utopia

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

The theme I use: Atom One Dark

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[Spytie]

margin-inline instead of margin : 0 auto is so much clearner ! thank you Kevin for your videos, learning new things every single time, keep doing what you do !

[mykalimba]

Super-duper pro tip: at 1:15 and 3:53 you mention that the min() and max() functions choose between two options/values, but both of those functions can actually accept more than two parameters, and will return the minimum/maximum of _all_ passed values.

[samuelanumudu]

I will highly recommend the conquering responsive layouts course by Kevin Powell. I took the course and completed the side projects (very tiny, mini course that's loaded with great stuff). Believe me, my CSS improved beyond what I imagined. Thanks Kevin!

[lisap]

Thank you!!! You definitely make CSS much more fun as well as easier to figure out! This video was especially helpful to me right now, as I am working on a project where I need to use clamp() for the typography. Your explanation along with the Utopia Fluid Type Scale resource has made it so much easier and quicker.

[tommyf]

I started my web dev course a few months ago from 0 to hero :-) i almost finished my first website and tomorrow i wanted to start my media queries for my website. Im stoked that i found your page! I have learned a lot last hour. Keep it up!

[josvelema]

last video this year? thank you once again for all the love for CSS and sharing it with us. CU next year !

[RobMapes]

Big fan of your channel. I'm an old guy, been programming for about 45 years (starting with Assembler and COBOL on mainframes.) I try to catch all of your videos.

[mafhper]

Ok, I already missed the times I changed something I always did, just by watching your videos! Thanks for enlightening us with these small but valuable tips.

[CariadEccleston]

margin-inline and clamp just blew my mind. 🤯 Thank you!

[jaydenmoon]

Love the work you do Kevin - you have helped so many people - thank you

[mikesmedley]

Like a lot of other people have said this video has taught me a thing or two! Many thanks for sharing it

[lovelesslol]

You literally uploaded this vid while i was studying Media Queries and Responsive designs ... I was like woohoo what a magical coincidence 😄
Love 💗

[-Will-]

Of all the YouTubers I follow, Kevin is the most deserving of patreon support. Excellent information, delivered excellently. Excellent dude!

[fdkhadra]

Kevin is on 🔥. Thanks a lot for sharing your work!

[gillesgfller]

Great content, always fun and useful. Thanks a lot

[jorgearley]

I describe you beyond a mere CSS evangelist. You're a philanthropist as well, 'cause You share with us a top-tier invaluable content for free, so my gratitude in advance KP.

[AdrienPyke]

That font size tool is super cool, I'm gonna start using it for sure

[CreativeTutorialsWeb]

*Thank You so much* Sir you improved my UI, *Thank You 💙*

[fernando-kw]

Amazing tip and tools as always! Thanks

[yuriyzadorozhnyi]

Thank you very much for the recommended sites for training . They are fantastic!