3 modern CSS techniques for responsive design

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

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

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

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

[@CariadEccleston]

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

[@lovelesslol]

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

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

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

[@TurpoChargedGaming]

That fluid type scales is a game changer for me!

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

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

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

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

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

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

[@striderstache99]

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

[@daleryanaldover6545]

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

[@Tachi107]

Why?

[@yuriyzadorozhnyi3849]

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

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

[@CreativeTutorialsWeb]

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

[@0-Will-0]

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

[@welling1]

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

[@mikesmedley2175]

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

[@krx0m]

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

[@trilheptal]

Thank you Kevin, really helpful. Greetings from Argentina

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

[@theloser4224]

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

[@mirceagorun1458]

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

[@AdrienPyke]

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

[@yuriyzadorozhnyi3849]

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

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

[@jaydenmoon1165]

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

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

[@Rocadamis]

Just to be clear; it is cmd+opt+m on a Mac and Firefox to turn on responsive mode.

[@sarojchauhan7392]

Thanks Kevin for this useful info ❤️

[@kevindivinagracia8620]

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

[@kohelet910]

Thank you! And Happy new year!!

[@georgesaitdev]

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

[@afrasiyabkakakhel4643]

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

[@ying7124]

Man you deserve subcribe! You save my project ass sm

[@dnlbellfield]

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

[@jejdacz]

Thank you

[@KevinPowell]

Thank you so much!

[@victorvanrijn]

Excellent tutorial Kevin!

[@reflectionethio9662]

You are our CSS Mentor

[@fdkhadra]

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

[@ShinigamiZone]

Thanks for using Vite 😉

[@lisap5615]

Thanks for all the great information!!!

[@KevinPowell]

Thanks so much!

[@evaldojr96]

You're the best!! Thanks for all Kevin

[@hafmax]

Thank you so much!. Very useful for me.

[@CrazyCodingChannel]

Very interesting, thnx for you work

[@yeshamikaela8106]

This is cool! Thank you so much kevin

[@maxxernB]

have a good new year!

[@KevinPowell]

Thanks, you too!

[@nickolaizein7465]

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

[@fernando-kw]

Amazing tip and tools as always! Thanks

[@gavinm91]

Love that t shirt :D

[@TheMetalMag]

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

[@gillesgfller]

Great content, always fun and useful. Thanks a lot

[@anandca4096]

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

[@ziadamer7621]

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

[@hienvinhle1797]

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

[@thiago_590]

"if you don't fall in love with it at least be a little less frustrated", think I'm in the second group xD

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

[@mahipalsinhdabhi9223]

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

[@marcelofleckhexsel8761]

Nice T-Shirt! Totally agree! :D

[@rishabhgupta2085]

Bahut khub kevin bhaiya

[@eduardflores8420]

entonteces podria usar solo clamp() para hacer responsiva mis fuentes y ya no usaría brekapoints????

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

[@AzaB2C]

Cheers Kevin!

[@tsivinsky]

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

[@nikkomanipis4715]

Happy New year my friend.

[@colleenwieder]

As always, thanks!

[@johnannovyn]

Happy new year

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

[@julioo534]

Thank You Very Much 🎉

[@haythamkenway1561]

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

[@BruceStaples]

Love the shirt Kevin!

[@tmbarral664]

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

[@sergeialekseenko3545]

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

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

[@hakanviajando]

Hi, thanks for the videos.

[@jadymulqueeney]

Thanks, brilliant

[@mimosveta]

please tell me that fiddle leaf fig is plastic, cause there's no light there and it's too good looking for such a primadonna plant

[@archangel_one]

What we really need is *"float: center" "center: center" and "font-size: fit"* Of course, these would help: "main: fit" "grid: 3 x 4" "effect: [effect]". Personally, I'd like it if we got rid of the "before, after, nth-child" and made it more intuitive. Also, it would be neat to declare our own css, like This font is in red. define red { div, color: red; }

[@KevinPowell]

Oh, love your comment so much, but I do have some questions! First up, you could do and `red { color: red}` if you wanted to right now and it'll work in all browsers, but is it that bad doing span class='red'? Also, would would center: center do? float: center could be handy in some spots for sure, but we do have shape-outside that sort of can accomplish that with a bit more work. We can also make a 3x4 grid pretty easily as well, but it is a little longer, with grid: repeat(3, 1fr) / repeat(4, 1fr);. The issue with 3 x 4 is, what are the dimensions of the cells? And I love before and after! As for before and after, I'd love to know what you don't like about them? I use them *all* the time and love them, but they are definitely a bit weird at first. Would love to know how you'd like to do that instead.

[@archangel_one]

@@KevinPowell Yes, you can do a "red" custom html tag now, and it should work. However, it does technically violate the rules, and I'm worried about how it would be implemented by the different browsers and devices both now and the future. And yes, it's much, much easier and intuitive to do a than a . And of course, this is just a simple example. When you think of "float: center," think of a Word Processor (or any of those office programs). When you insert an image, you can anchor it to the page, paragraph, or character (and even use x, y coordinates). Then you can specify the wraparound to be things like: none, parallel, optimal, before, after, etc. You can align: left, right, center -- and you can align it with other objects or to the anchor point. And all that with a simple "float: center" (depending on the defaults). The use of pseudo-elements means that the element is BROKEN. It's insane to have them. First, fix the element so that most of these things can be done inside of it. Secondly, if you want a "before" then it should be the same as putting a span or a div before it. Or, optionally, they could bring "layers" back. It might be nice to have layers inside an element, to put things under, on top of, before, or after an element, but why can't it all be the same thing (or something intuitive)? As for "grid: 3 x 4" - the idea would simply be the "holy grail" layouts that everyone is always looking for. Maybe it should be "grail: 3 x 4"? The only other thing that might need to be added would be to fit the content or not.

[@dimabatalshikov2382]

Nice T-Short ! )

[@mahdiabolghasemi189]

awesome Powell

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

[@kalahari8295]

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

[@twinkletoes9393]

Loving the t-shirt 🤣

[@Pareshbpatel]

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

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

[@debbya3895]

I got this error Compilation Error Internal Error: Incompatible units: 'px' and 'vw'. when using the min() and max() functions. Do you know why?

[@pranithdeeper]

How to keep same height of div in responsive design and when we zoom in ? Could you please respond ?

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

[@thomasoa]

Harold Lloyd, who plays the creepy-eyed student/alien, would later play the creepy character Viserys, both of Danerys, in the first season of Game of Thrones.

[@leg3ndtariq]

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

[@mirjalolochilov8428]

👍very good Kevin

[@siddhantkhare2775]

Hello Sir, I'm really a big fan of yours from India🇮🇳 I just want to know that Can your merachandise be shipped in India 🇮🇳. I like the hoodie with HTML Logo a lot.....🙂

[@bass1387]

Cool, but what about browser support?

[@doubledeckercouch6251]

OMG! i Neeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeed that xmas tree!

[@Allformyequine]

This is great and so is your shirt lol!! Do you have those in your store? I need one :).

[@KevinPowell]

It is in my store! 😁

[@Allformyequine]

@@KevinPowellOn it!!