5 simple tips to making responsive layouts the easy way

🎓 FREE COURSE: Conquering Responsive Layouts courses.kevinpowell.co/conque...
🔗 Links
✅ min(), max(), and clamp() - • min(), max(), and clam...
✅ Creating "squishy" padding with min() - • Creating squishy paddi...
✅ The 100% correct way to do breakpoints: www.freecodecamp.org/news/the...
⌚ Timestamps
00:00 - Introduction
01:42 - The right mindset
03:12 - Start with global styling
04:46 - Avoid fixed sizes
08:17 - Use media queries to add complexity
12:54 - Take advantage of modern CSS
#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/
---
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 KZbin 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!

[@DanteMishima]

"It is us who breaks the responsiveness of the web" - Kevin Powell, Conquering Responsive Layouts

[@notso_geek]

This sentence changed my way of thinking about responsive design. Thanks Mr. Powell!

[@GreggBursey]

YES! “Before you write a single line of CSS, your website is responsive”. This is so important to know and start every page with. Then the next step - in the case that things aren’t how you want - write the minimum amount of code it takes to make it how you want.

[@patfoiloofficial2154]

that is where he talked about mindset correct ?

[@mohamedessam8231]

i don't understand can you explain?

[@GreggBursey]

@@patfoiloofficial2154 sorry for the late reply - yes that’s the section 😊

[@zachjensz]

this advice solves 40% of css problems on the discord lol

[@howeven8054]

Ikr

[@mode2317]

What problems? Can you be more specific?

[@Rust_Rust_Rust]

@@mode2317 specifically 40% of problems

[@jaysternion9741]

@@Rust_Rust_Rust XD

[@johnfuture5280]

Exactly 😂

[@MrBa143]

My best advice, always develop for mobile first. Make sure the default html / css looks and works the way you want on a small device. As you make your screen bigger, start adding media queries for the small stuff that needs adjustments. Trust me, if you do a big size first then you end up going down and make way more media query blocks and modify more css properties. Small to big gives the least amount of code.

[@brutepunk]

nice

[@Akshat-gv2gg]

Thanks a lot :)

[@keaton718]

Should you develop mobile first if you are making a site that has a niche audience and your stats reliably show 81% of visitors are using a large desktop screen and only 19% are using mobile?

[@MrBa143]

@@keaton718 Do you want to include those 19%? Are you converting enough users with those 81% to justify not making your website responsive, if yes then dont bother. It is also a question of how "bad" the readability is for a mobile user. Some websites can still be "read" even though they dont resize that well. However, unless you have very complex elements in your design and are going to / in the process of rebuilding your website, then i would always go mobile first. Its not alot of extra effort for the added satisfaction from your customer base. Mobile is always the most simplest form of your website.

[@keaton718]

@@MrBa143 I always assumed mobile first was done because most websites visits are done on mobile devices these days. When designing desktop first I assume people are doing it with “mobile in mind” at least. I can’t actually think of a niche group that would use desktop more than mobile, maybe some B2B websites? So mobile first should almost always be best practice in any case just because it’s what most people use when visiting a website.

[@LeoNerdOso]

Avoid fixed Sizes.... THANK YOU!! The other day I was having a discussion with a friend who is also a frontender and he was saying... don't be affraid of fixed sizes. This began because I said... Inside my head, I feel I have to move as away as possible from fixed things. Cause I feel an app or web is an organic thing that needs to move, shrink and flow.

[@anetthorvath8315]

Okay, the clamp function really dropped my jaw. Like WHAT why am I not using this?! Thanks for the amazing content! :-)

[@joseflanders]

Seriously! What a great little bit of code!

[@DiestroCorleone]

That's the tip that will change my life.

[@georgeberar5055]

I don't know how I ended up on this channel being a back-end developer but man I love your content and the simplified explanation on layouts and displaying things. I guess I will give another shot to my forgotten UI projects.

[@frankfritzer1521]

Hi Kevin, thank you so much for your great work. Every time I had a bad day at work, I watch one of your videos in the evening and I'm in a good mood again. It's not just the content of your tutorials but your whole uplifting personality. Please keep up the good work.

[@kinnonambio9683]

As a new web developer, this really helps a lot in starting in the correct path. Amazing content!

[@z3ro-0th42]

It's been 11 months since you wrote this comment ,, where are you now in web development? Are you good at it now?

[@earnAndElevate]

@@z3ro-0th42 its been 1 month since you wrote this comment, did you get better?

[@ousmane15]

@@earnAndElevate Its been 11 days, what about u?

[@klemenhorvat-novak2056]

@Theodore Lexus Its been 1day how it's going with web dev?

[@goncalocarvalho1361]

@@klemenhorvat-novak2056 how much better have you gotten in the last 9hours?

[@AbdicateDotNet]

Great video!! I love how you explain the issue so clearly with the solution. I'll be keeping this video as a ref so when I begin a site, I'll have it handy to remind me what I need to do and not do. I'm not a novice, but I don't do pages very often. Great ref tool!! Thanks Kevin! 👍👏✔

[@williambennion7423]

Having a hard time with responsive designs. Will definitely sign up for the responsive design course. Thanks for the great video.

[@charlesxavier77]

"NO BODY HAS A PHONE THAT HAS A 270 WIDTH" Galaxy Fold - Am I a joke to you?

[@lakshaysharma10]

Exactly what I was thinking

[@musicmant6]

🤣🤣🤣

[@Victor_Marius]

You mean the gigantic smartphone? Isn't that double the size of a regular smartphone? Wtf?

[@coltonaallen]

Yes... Yes you are

[@VeaceslavBARBARII]

@@Victor_Marius I believe he meant the Samsung Galaxy Z Flip.

[@gwemula]

This was very, very helpful, especially because I’m currently (again) struggling with responsive layouts. From now on, I’ll try not to use device-specific media queries. Thanks Kevin!

[@hvmalpani]

Been a developer for more than 7 years now and your videos still give me some good ideas most of the times. Thanks :)

[@unizfrhn2803]

This is a golden video. Responsiveness is the reason I had to write extra css code and now this video removed so much of that hassle. Thank you so much Kevin.

[@terrypark3690]

All your videos are so helpful and have made me view frontendtotallt differently; I can't imagine how much I'd get from a fully planned out course thank you so much🤩

[@BernhardHofmann]

I've been watching more and more of your videos. I'm a senior full stack developer with a history that pre-dates the www. Your videos and insights are just mind blowingly excellent. The joy of working from home is that I get to watch you do your magic on my lunch breaks and I'll admit it's the highlight of my day. Thank you so much for sharing your awesomeness with us. 🤘🏻

[@e.m.janssen3638]

I'd definitely recommend the Conquering Responsive Layouts course, I'm working on that right now and it's been a lifesaver. Thank you Kevin for all that you do, the tutorials are much appreciated.

[@innoc32]

Your solution at 8:40 was what I've been looking for for a long time, that's so simple and I've seen such over-engineered solutions elsewhere! Thank you!!

[@b.c.d.9543]

Currently doing my 3rd responsive website challenge and this has helped immensely.....plan on taking your course ASAP.....Love how clearly you explain things.......

[@joshuaberrios]

Love evergreen videos like this. Thank you so much. I have been working on becoming more proficient in building better mobile responsiveness elements at my job and this video came in my crosshairs at the right time. Also, you can wrap your code in VSCode by pressing Alt + Z on Windows or Option + Z on Mac.

[@luisfelipeperezgarcia3219]

I just love how easy you make it look like for beginners. I'm definitely subscribing and taking the course. Keep up the good work my man!

[@ninopotskhoraia5373]

I totally recommend Kevin's responsive design course. It was a huge help for me and helped me create my first responsive layout independently. It is ridiculously well explained and easy to follow. Thank you Kevin for all you do!

[@IvanOung]

Where can I find that course? Is that on KZbin?

[@OFlavia]

@@IvanOung check his website

[@mascatrails661]

great tips. love this concept of getting in the mindset of responsiveness. gotta remember that max-width, min-height, and especially the clamp with a calculated value as the preferred. gold.

[@abcweb8334]

Kevin, Just a note to thank you a lot for the quality of your videos. I've learned so much from you.... Bless you...

[@a.galvaop.787]

I missed this type of content :). Short & informative videos are useful but I enjoy watching this "project" setups and the logic behind it. Keep up the good work KP!

[@recursiveackermann9819]

I am blown away by the things I learn on your channel Kevin. Thank you so much.🙏🏾

[@haydenmaines5905]

I have been looking for clamp for what feels like YEARS now! Having a margin that shrinks proportionately as the device width shrinks has been driving me crazy, thank you so much for sharing this!

[@cigomba]

I really appreciate the free course. It's teaching me a lot and solving a lot of frustrations I've had with css.

[@yahyasalimi3254]

This video absolutely changed my perspective. Before I wrote css for desktop and then at the end I was like oh wait what about mobile. NOW I know how to approach it. Thank you Kevin!

[@Wanderlustclusterfuck]

This was immensely helpful. I am terrible at CSS and this has taught me a lot and answered a lot of my questions. Thank you.

[@awesomedizzyz]

This video is so good. I am taking a web dev class this summer (final exam next week) and your videos are helping so much. I just want to go and make a website every time I learn something new from you!

[@dixxixio]

This is such a big help! Thank you and keep what you are doing! More power to your channel.

[@PeriMoritz]

Thanks for this Kevin. It’s always good to be reminded about this.

[@TheOGDesigner]

Great video!, thanks I started with React and CSS about 3 months ago, and at this point I feel I have the hang of it, for a good part but watching you use CSS and how fast you can think of the way things will look is stunning! Thanks for the great info! 💯💯

[@billhuang6506]

Thank You Kevin! I've been following you for a while, but I sure wish I had seen THIS video a few months ago. I pretty much did the opposite of what you recommend. Can't wait to go back and correct.

[@user-sy7lm6lw8i]

Kevin you're amazing! I just checked your course, I am on the second video. It' s just wooow and it's absolutely free. You can't imagine how much you help people who study and cannot afford bootcamp or subscriptions, and I am also from Russia, I can't pay with mastercard or visa anymore. You're a hero, thaaaaank you!!!! I

[@alisonfool]

Watching this before starting my final project in a web development course. Thank you for helping me get in the right mindset!

[@scott-richardson]

I've been a web developer for 20 years, and consider myself a heavyweight, and I was totally blown away by the final point, with the clamp() function on the font-size. Mind blown. Sometimes it's hard to keep up with this stuff! I will be using that for sure :)

[@LilRumi]

Really shows how anyone can learn something new even if they're super skilled! 🤯 I hope you get paid enough for all 20 years! That's a long time!

[@scott-richardson]

@@LilRumi Hah thank you! I'm fortunate to be able to pick and choose the jobs I take on, but I did move out of the city into a regional area so the pay isn't as good as a metro-based job. I run my own company now anyway and have been able to take advantage of a better lifestyle and work/life balance.

[@LilRumi]

@@scott-richardson 🤯 Whoa! And you're welcome! I was going to ask why not find a better paying job, but you run a company?!👏👏👏 That must be difficult. Congratulations though! I could never run one, hahah. I hope it does well 😄

[@lukas.webdev]

I just posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉 (I'm pretty sure you don't know all of them)

[@asiimawepablo441]

I now conquer them like a pro now thanks Kevin won't stop giving you my gratitude because i now love css and what i can do with it.

[@lordyc8393]

This video made me understand CSS better than the last few months of tutorials have. Thank you so much for this

[@NNNedlog]

Its like you read minds. I really needed a video like this and you made it! Thanks a lot Kevin

[@bobdinitto]

Lots of good advice here. Conceptually though I take the opposite approach: I start by visualizing a multi-column landscape view for the desktop and then collapse that into either a single column or a double, then single column, with either one or two breakpoints. Once I visualize how I want the columns to collapse I try to come up with a flexbox or grid or some combination that will do the trick.

[@mpb0406]

I needed this for a project I'm currently working on. Great video!

[@yahayaoyinkansola8258]

When you said look at your website to determine which breakpoints you should use, that just opened my eyes, never taught of it that way, I was always looking for industry best based breakpoints standards

[@arsaurabh6044]

Awesome content. This is called as sharing your wisdom. Great video and explanation. Would love more videos like these. Best 15mins spent on YT.

[@mimoduocss]

Ooo shucks back in the day I made a sweet sass mixin for responsive typography then clamp comes out and does it in one line! Thank you for the excellent guide; truly some great practices you packed in here!

[@JocelynAlsdorf]

You are my fav person on youtube for CSS content. Thank you. If others here are reading comments and this is the only video of Kevin's you've seen, highly recommend checking out all of his CSS stuff :)

[@prathyushsunny]

Thankyou for this video. Just the day before, I was banging my head in making a page responsive. These tips really help.

[@janekutko2175]

So simple and so useful tips. Thanks Kevin, great stuff 😊

[@CrackerJayherber]

Very helpful, Kevin. Again, hitting on points that are very relevant. For me, it was the min height thing that helped. Also, I didn't know about "Clamp" yet so I guess we know where I'm at in my learning, lol. Thank you.

[@nayem6386]

This is what I needed. Very well and precisely explained. Thanks a lot

[@roshanlalsahu7846]

Conquering responsive layout is worth watching for beginners, I got little confidence with css now Thank you so much Kevin

[@arianaquino6673]

Hello Kevin, thank you for sharing all your knowledge and experience!!!

[@shotgun600]

Thank you for the free course about understanding the responsive layouts. Thank you for everything.

[@Fraymon04]

Great video! I just realized I don't use min & max with /height enough. All the tips were really useful at least for me! Thanks

[@Lala-jl7mi]

The part about using media queries to add complexity fixed my problem. I was beating my head against the wall because I wasn't understanding how to use media queries correctly, and then being confused as to why the page wasn't coming out the way I pictured it. But thank you so much for helping me to change my understanding of how to use them!!

[@BrianFrancoeur]

The clamp() property is a revelation for me! I’m going to use this on a new project I’m starting next week.

[@jonasex3001]

More than the technical stuff, this is gold. Thanks

[@ChanoManimtim]

Helpful tips! Saved me from fixing overlapping divs. Thanks kevin!

[@jonasoliveirapereira2526]

This was a great lecture. Most of youtubers are like "And now I'm gonna do that..." and doesn't explain why they're doing that, which is just watching him coding. That doesn't happen here, this guy knows his stuff :)

[@Michelle.Engstrom]

Wow, am I glad I found you. I just started to learn UI design and was very frustrated at how unresponsive it was. Fixed heights abound- ugh!

[@damiangonzalez_esp]

Thank you for the clamp function, it really is a time saver ! Love your content ❤

[@lukas.webdev]

I just posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉 (I'm pretty sure you don't know all of them)

[@iiinicky6224]

Great video as always! I wish I had known about your channel back when I was learning CSS.

[@OyunDestesi]

This video and your earlier video about making a responsive layout really fixed one of my problems. It will be great if you make a video about cross browser :)

[@anshumanshukla8526]

so much of knowledge in a single video... Thanks

[@martinemanuel8239]

man you are GOT, always I recurred to your chanel and this time you save me a lot of time, in the future i will buy all of your courses ! thanks 🙏

[@Dylson]

Amazing content Kevin, great tips for beginner Web Devs!

[@TomasHradckyComposer]

Wonderful. I am less overwhelmed. Many thanks.

[@TheCocoaDaddy]

WoW!!!!! AWESOME video!!!! I'm literally about to start on re-design #3 of a website I maintain for a friend of mine and some of the issues you raised, in this video, are at the forefront of my mind. So, I'm ABSOLUTELY going to take the class. I understand the "mobile first" approach, but I tend to hate that term. I tend to think of things more from a 'mobile appropriate' perspective. :) lol Anyway, some of the tips you showed really give me great food for thought for thinking of creating new pages differently. You, Sir, are brilliant!!!! THANK YOU!!!!

[@karenalexander5787]

This is so helpful! Kevin Powell is getting me through my Uni assignments :)

[@thania2266]

Kevin, thank you so much! This video is a lifesaver!

[@JennyZibreva]

Kevin we love you, thanks a bunch for awesome content and great tips!

[@ginozega8717]

Amazing video! you really helped me with my struggles trying to build a web that is responsive.

[@_FarhanKennedy]

BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!

[@AndyMorrisArt]

Dude! You are a freakin' Genius! I'm a novice with 25 years of experience building my own website about 12 iterations over that time plus one website for a dive-bar back around 2002 that earned me 80 beers a month! Anyways I've always thought "Isn't there an easier more elegant way to render elements aesthetically w/o volumes of code and using the important tag so much?" I know that IDK much, but have come to think that a lot of "gurus" are overcomplicating things. Give me simplistic beautiful code that functions efficiently is what I say, and you just delivered that probably saving me a hundred hours or more in my attempt to make my basic website responsive. The "templates" that W3 provide look insanely over-complicated for my needs. Thanks for a great video. I subscribed, liked, and commented and now I'll go sign up for the free course.

[@KevinPowell]

So glad you enjoyed the video Andy, and hope you enjoy the course even more ☺️

[@SeanGoresht]

Yep. I agree with most of this. You do need to set width and height on images, though; that will prevent screen jank when the images load, pushing content around.

[@martinheywang4962]

CRL helped me a lot! I encourage you taking it.

[@husseinalwajedi8756]

This video solved most of my problems with css, Thank you

[@Kerreber]

This is wonderful, thank you so much for sharing!

[@user-rh2ty7rt9u]

You are awesome brother. Thank you for helping!

[@rowenapacadalhin731]

You're really great instructor. Thanks for all the videos.

[@lord_vats]

You are a gem Kevin. Oh btw, I'm a Scrimba graduate working professionally as a frontend dev now. Please create a course on Design Systems if you can find the time.

[@daizwap9454]

thank you, Kevin Powell I really appreciate your work

[@kaustubhmasram8573]

Thank you for your free course !!

[@marshag6345]

This is super. Very helpful and well presented - Thank you.

[@CreepyCooperMc]

Oh man, I have to see this video. I struggle so much with responsive layouts despite I’m good enough at CSS. I don’t have time right now, but I’ll watch it later for sure!

[@IlonaJosiane]

I extremely like the video, man. Very helpful and informative. Thank you very much. It is presented so well too. Great, positive work.

[@nazanin_ashrafi]

I'm still struggling with responsive design, but I learned new stuff thank you Kevin

[@runawhitley3277]

I cannot say enough, awesome video! Thank you so much!

[@justuskiprotich3413]

God Bless you Kevin. Finally got what I've searching for

[@some-dev8884]

Your responive design course was very insightful and awesome 😀

[@alfredoeleazarorozcoquesad2988]

Thanks, really helpful to get in the right mindset.

[@donnazukowski]

Thank you always, Kevin. The clamp() is awesome.

[@lukas.webdev]

I just posted a video about the Top 10 CSS Features you should know and use in 2023 => if you want to discover even more useful tricks ... 😉 (I'm pretty sure you don't know all of them)

[@pawekoaczynski4505]

small tip that I remember from another Kevin's video - use outline instead of border for debugging' CSS. Because adding border affect's the element's size, while outline doesn't

[@Danachew]

Or you can set box-sizing: border-box; (which I do by default anyway with every sheet I write) and any border will adapt to its container's width value without adding to it.

[@pawekoaczynski4505]

@@Danachew maybe, but then the border will affect the element's content, so the element still doesn't have the exact same proportions as when there is no border

[@brucemartin4269]

You have helped me so much! Thank you

[@jbb2111]

Always a huge help!

[@crimsoncad3230]

Your point of using min,max height and width instead of just height and width; made a big difference. By this way I also got to know that browser tries to adjust itself when we have min and max instead of just height, width.

[@DayOfVictory007]

Very helpful. Appreciated the tips!

[@meddyp7635]

Thank you so much for this content! You just helped me fixing my code!