3 modern CSS techniques for responsive design

My free course, Conquering Responsive Layouts: courses.kevinpowell.co/conque...
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
✅ Utopia Fluid Type Scale: utopia.fyi
✅ SmolCSS - minimal snippets for modern CSS layouts and components: smolcss.dev
✅ Modern CSS: moderncss.dev
✅ vmin and vmax: • CSS Units: vh, vw, vmi...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
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 CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@Spytie1]

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 !

[@Xamy-]

Ditto!

[@anmai3805]

Yeah this tip is awesome

[@jenstornell]

The nice thing is that you will never override margin top and bottom with it. 👌

[@Spytie1]

@FinnDefault the end result is the same but in your code it allows you to not overwrite margin top / bottom values, cleaner !

[@tevinmorake8924]

Dude! I went like, "Why don't I know that?" Freaking cool!

[@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.

[@KevinPowell]

Very good point! I should have mentioned that 🙂

[@tommyf16]

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!

[@samuelanumudu9080]

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!

[@mahipalsinhdabhi9223]

Could you share the link for the course!

[@smz702]

@@mahipalsinhdabhi9223 Check in the description.

[@pratamaa.s.4356]

Yeah, it kinda makes my CSS fundamentals stronger, highly recommended!

[@DanieleManca1983]

@@smz702 I found it :D

[@0-Will-0]

Great tip.

[@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.

[@CariadEccleston]

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

[@lisap5615]

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.

[@josvelema2362]

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

[@KevinPowell]

Happy new year!

[@jaydenmoon1165]

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

[@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.

[@lovelesslol]

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

[@0-Will-0]

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

[@mikesmedley2175]

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

[@jorgearley9321]

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.

[@kohelet910]

Thank you! And Happy new year!!

[@fdkhadra]

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

[@TurpoChargedGaming]

That fluid type scales is a game changer for me!

[@CreativeTutorialsWeb]

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

[@xenobino8432]

Thanks for the fluid fonts tip. It's a problem I faced in my last project. It was really frusterating. I had a very nice looking h1, I opened mobile view for testing and... BOOM, an uglily big h1 is covering half the screen. Also thanks for the min/max tip it will really change the way I write css.

[@yuriyzadorozhnyi3849]

Дякую друже , це було дуже круто !

[@mirceagorun1458]

Thanks for this BIG opportunity to get a free course (Conquering Responsive Layouts) from the master of CSS KP!

[@afrasiyabkakakhel4643]

Man your videos are amazing. I always learn new things watching your videos. Thank You

[@thekishancloudvlog4297]

max and min property is new for me i see first time thats greate and its very helpfull thank for sharing your knowledge sir.

[@yuriyzadorozhnyi3849]

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

[@striderstache99]

Thanks Kevin! Helped me solve a problem at work that's been there a couple weeks lol

[@victorvanrijn]

Excellent tutorial Kevin!

[@gillesgfller]

Great content, always fun and useful. Thanks a lot

[@fernando-kw]

Amazing tip and tools as always! Thanks

[@georgesaitdev]

A big big big big like again! Thank you Kevin!

[@trilheptal]

Thank you Kevin, really helpful. Greetings from Argentina

[@daleryanaldover6545]

I usually avoid using css functions aside from calc( ), looking forward for more css next year!

[@Tachi107]

Why?

[@evaldojr96]

You're the best!! Thanks for all Kevin

[@cassandrawoodhill53]

I've used clamp() in the past but ran into issues with Safari and Chrome for iOS 11.3-13.3. You can create the same effect using min(max()) method instead (especially with responsive font size),
Example: min(max(, ), ) creates a fallback way if you need to support as many systems as possible.
Thanks for the video Mr Powell

[@krx0m]

Thank you so much for sharing these valuable tips with us.

[@AdrienPyke]

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

[@yeshamikaela8106]

This is cool! Thank you so much kevin

[@theloser4224]

BROOOO THANK YOU SO MUCH THAT WAS FROM MY BIGGEST WEAKNESS POINTS UR MY SAVOIR ♥

[@lisap5615]

Thanks for all the great information!!!

[@KevinPowell]

Thanks so much!

[@kevindivinagracia8620]

I dont know how to say thank you .Kevin This is amazing

[@nielslytzdk]

The Chuck Norris of CSS does it again! Thank you for yet another usefull tutorial, I bet your viewers are falling in love with CSS a little more day by day :D.

[@sarojchauhan7392]

Thanks Kevin for this useful info ❤️

[@ying7124]

Man you deserve subcribe! You save my project ass sm

[@tsivinsky]

I always had problems with CSS but with your videos I think I can become better with it. Thank you, Kevin.

[@julioo534]

Thank You Very Much 🎉

[@hafmax]

Thank you so much!. Very useful for me.

[@TheMetalMag]

Thank you! It’s sop amazing all the things you can do compared to what i learnt in the past

[@itsPenguinBoy]

Aww clamp() solves a problem I was previously super proud to have solved in more complex ways. Its hard to let go, but I guess it will be worth it!

[@jadymulqueeney]

Thanks, brilliant

[@reflectionethio9662]

You are our CSS Mentor

[@hienvinhle1797]

Thank you so much ❤️ I think trick this very good

[@CrazyCodingChannel]

Very interesting, thnx for you work

[@ziadamer7621]

it's really really wonderful video thank you so so much for this wonderful tricks ❤❤❤

[@mahipalsinhdabhi9223]

Thanks for such amazing videos.. hope you was one my faculty! 😁

[@AzaB2C]

Cheers Kevin!

[@haythamkenway1561]

Amazing video ! like always ! and happy new year , wish you and your family good and healthy life ❤❤❤

[@hakanviajando]

Hi, thanks for the videos.

[@nickolaizein7465]

Why I don't see this video before... 😯 It amazing !! 😎

[@welling1]

I always feel so smart when I successfully use clamp(),min(), max().

[@marcelofleckhexsel8761]

Nice T-Shirt! Totally agree! :D

[@clevermissfox]

I’m so delighted for all of these responsive values and possibilities but when coding in real time I tend to forget a few and kick myself later. Clamp, min() max(), minmax() for grid, %s, viewport units, vmin vmax, then the behaviour with flex and grid where the children will stretch by default , it’s a lot. Something I really intend on mastering (along with using more obscure selectors)

[@fran_sar]

as always you rock!

[@user-jj5lz9xo2d]

nice, thank you )

[@mahdiabolghasemi189]

awesome Powell

[@rishabhgupta2085]

Bahut khub kevin bhaiya

[@nikkomanipis4715]

Happy New year my friend.

[@shinmini99]

Thanks ❤

[@mirjalolochilov8428]

👍very good Kevin

[@ShinigamiZone]

Thanks for using Vite 😉

[@maxosall6972]

Great job

[@johnannovyn]

Happy new year

[@BruceStaples]

Love the shirt Kevin!

[@danisob3633]

thanks!

[@jejdacz]

Thank you

[@KevinPowell]

Thank you so much!

[@dimabatalshikov2382]

Nice T-Short ! )

[@MYMIND252]

quick tips for making a webpage responsive
for width rem
Instead of using hardcore width use max-width which is more responsive,
padding in em,
don't fix height,
but in some cases if you want to fix height use min-height,
for making font responsive use (font-size: clamp(2rem, 1rem + 10vh,5rem)) ,
we can use the same method for making padding responsive using (clamp)

[@AdityaRajM.R]

Osm ... it's very nice dear

[@sridhar2022]

Thanks!

[@KevinPowell]

Thank you!

[@maxtreme2901]

have a good new year!

[@KevinPowell]

Thanks, you too!

[@Pareshbpatel]

Great Tutorial on modern CSS techniques. Thanks, Kevin
{2022-01-07}

[@sahllsaharn4664]

loved your resource sir now i dont have to scratch my head for responsive font which taked me like a our do this s###

[@JaimeBIDtravel]

Superb helpful. I know the deal is to design by oneself and to test a lot, but I was wondering if there are some kind of "default" settings or specific parameters to start with, kind of css starter template

[@abdellahdamri656]

Thanks You Kevin That was Very Helpful !! I was Wondering if u could do a tut about building a CSS Framework That would be awesome !!

[@margauxpalvini7402]

Hi Kevin! Thank you so much for your videos, i love them :)
I've got a question tho regarding the usecases of clamp or min max while coding mobile first. Is it changing something or can we use it the same way? Thank you again for your amazing job here!

[@twinkletoes9393]

Loving the t-shirt 🤣

[@comartse]

Thank you for the presentation. Notice that I need to refresh my old CSS skills. What are the prerequisites in a CSS structure for your examples to work?

[@anandca4096]

See bro 😀, The only one thing i need to say is `You're Awesome`

[@nodidog]

Love the t-shirt 🤣

[@user-sf6nj9sp4m]

cool video)

[@gavinm91]

Love that t shirt :D

[@tymiller2596]

Super...

[@wilhelmngoma9009]

Thanks. Great content. Please, why is repeat(auto-fit, minmax(min-value, max-value) not working when max-width of a specific value is applied to the same element?

[@dnlbellfield]

I signed up for your free 21 day responsive layout challenge.

[@sergeialekseenko3545]

Thanks for the content!How have you done that nice title? Amazing...

[@leg3ndtariq]

Oh,, Man.... U r a God in CSS 😁😋 Happay Ending 2021#

[@kalahari8295]

Mr. Kevin, do you recommend I use the fluid font trick you showed above in Large/Commercial sites

[@tmbarral664]

;) Kevin, you did it again. Made me laugh when I realised what's on your tshirt. :oD Nice one ;) Cheers !

[@BradEvans]

Awesome shirt.

[@pablocortes682]

Great video Kevin, would you please consider making a video on how would all this responsive techniques translate to accessibility? like what can be done to have a fluid responsive site that is also accessible.

[@gbdaeye]

Brilliant video, great tips. Does using the min and max settings effect layout shift measurement in lighthouse?

[@KevinPowell]

Not that I know of, but I never dug in there... but also never had something come up that made me think that might be the issue.

[@buondevid]

Nice video Kevin! Do you have any suggestion or explanation on whether to use min() and max() or min/max-height and min/max-width? Sometimes I get confused about what's better to use. Thanks :)

[@stephenJpollei]

You could always use both :
.foo { max-width: min(12rem + 22vw, 68rem); min-width: min( 8rem+1vmin, 11.5rem); }
or similar