5 simple tips to making responsive layouts the easy way

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

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

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

[@kin_nam5]

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?

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

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

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

[@hvmalpani]

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

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

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

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

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

[@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! 👍👏✔

[@ДианаДиана-с1г]

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

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

[@Ebenixer]

Exactly 😂

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

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

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

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

[@williambennion7423]

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

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

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

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

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

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

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

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

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

[@DavidCouillard]

Thanks!

[@KevinPowell]

Thanks so much David!

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

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

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

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

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

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

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

[@jasonshere]

Kevin, I've been using CSS for a few years, but I still have a lot to learn. I've recently started a new job with an agency that uses Bootstrap and I've been adapting to it, however I don't like it nor understand its necessity. It's fascinating, and a bit inspiring, to me that extraneous tools, like Bootstrap, were not mentioned in this video. It appears to me that I should just KISS.

[@hetoverseo3887]

With time and experience you will create your own framework. Bootstrap is good yes, but often you will need to overwrite things and end up with a custom version of it.

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

[@cysroom]

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

[@anshumanshukla8526]

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

[@jmartinez2131]

i love clamp. i didnt know if it was bad practice to use it. good to see that its got Kevin's vote of approval. but i'm sure it must not be abused.

[@diegomarzo4001]

I loved this video, I loved the part of "talk with the designer", the one I work with tells me things like: -Put that 38 pixels We put it and all looks perfect, I look at him and I say -Dude how you do that? And he simply laughs :D

[@roshanlalsahu7846]

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

[@mdzaid5925]

Damn, I just realized that I know nothing about CSS / responsive web design. Really thankyou for providing your course for free!!!!!!!!

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

[@NNNedlog]

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

[@BrianFrancoeur]

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

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

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

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

[@alisonfool]

Watching this before starting my final project in a web development course. Thank you for helping me 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)

[@scientificshiv]

🎯 Key Takeaways for quick navigation: 00:29 *🔧 Embrace modern CSS solutions for responsive layouts to ease frustration.* 02:22 *🧠 Before writing CSS, understand that your website is inherently responsive; it should adapt to different screen sizes without losing functionality.* 03:47 *🎨 Prioritize global styles such as typography, colors, and backgrounds before tackling layout, ensuring a solid foundation for responsive design.* 04:57 *📏 Avoid using fixed sizes for elements like width and height to prevent layout issues across different screen sizes.* 08:12 *🖥️ Use media queries judiciously to add complexity to your layout as needed, preferably using min-width queries for a mobile-first approach.* 11:00 *📱 Choose breakpoints strategically based on where layouts begin to break, aiming for fewer breakpoints to simplify maintenance.* 13:06 *🌐 Consider adopting more modern CSS approaches like `clamp()` to minimize the need for traditional breakpoints and enhance layout flexibility.*

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

[@KyleMerl]

That clamp trick is awesome! No more adjusting H1's in media queries for me!

[@mazagoez7190]

sounds really great, then i got a message from client, it's not working on their browser, and their client using IE the layout broken etc. This is mainly the problem i have with modern css. The compatibility. Sound really great but i don't get much use of it because of compatibility.

[@KyleMerl]

@@mazagoez7190 if IE11 you can impliment a media query as a fallback. Remember css skips properties it doesnt understand so if you have a fall back it will naturally use that. Gotta take advantage of the 'cascade' in css!

[@mazagoez7190]

@@KyleMerl i know. i use that as well, but still it's really a pain, meaning i have to use double work, both modern and conventional css. and client sometimes complain why in this browser looks good like that but in mine looks different.

[@KyleMerl]

@@mazagoez7190 in this particular case you're really only adding one additional line of code. And then you're keeping up on all the new css stuff! Backwards compatibility is important (altho not always necessary) but it's also important to keep up on learning and incorporating modern css too.

[@zachjensz]

@@mazagoez7190 It sounds like your problem might also be educating your client on websites changing in appearance based on the device, browser, user settings etc.

[@recursiveackermann9819]

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

[@elvisdavinci2567]

Bruh this guy is amazing.....your advice worked like magic

[@watchandlol]

Sitting here listening to you go on and I'm thinking: "Meh... I know all this!". And then you mention clamp()... WOW! How have I never heard of this before?!

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

[@mgltm9963]

best teacher ever , i have learnt full css java and html in HOME

[@andy_bg3479]

I love Html,Css and JavaScript I learned it in lockdown and I loved it

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

[@husseinalwajedi8756]

This video solved most of my problems with css, 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!

[@PeriMoritz]

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

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

[@omniadarweesh2013]

Thank you so much for focusing on responsive design; it used to be a step that I dread everytime :'

[@cigomba]

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

[@prathyushsunny]

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

[@SyedTabarak]

I've used all this modern CSS, like clamp, gap, padding/margin-inline/block, but at some places based on the browser's version they don't support fully yet. So better to have an eye on the versions while using modern CSS.

[@nayem6386]

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

[@shotgun600]

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

[@serginho4]

the kind of channel where you give the like before watching the video. thanks Kevin!

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

[@IvanildoSilvestredaSNeto]

Nesse vídeo você comenta que não existe dispositivo 270px e hoje existe o Galaxy Fold que não é 270px mas é 280px 🥲 Dicas incríveis, obrigado por mais esse compartilhamento de conhecimento, Kevin.

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

[@wigzela7083]

Many thanks to the CSS Wizard Mr Kevin Powell, thank you for the tips sir, much appreciated!

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

[@nazanin_ashrafi]

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

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

[@vivekkumar-pc1xy]

Awesome lecture. I'm really greatful for this video. I'm stuck with the issue of responsivness in my project. I know I can solve now.

[@Tesseract9630]

Thanks

[@KevinPowell]

Thank you so much 😊

[@arianaquino6673]

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

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

[@justuskiprotich3413]

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

[@Siicklex]

Maybe you will not read this comment,but I wanted to leave him here to thank you, I'm starting and your videos have been helping me a lot. thank you very much greetings from Brazil

[@oscargalvez7]

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! 💯💯

[@_FarhanKennedy]

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

[@AshtonMotana]

While font sizes cant use % to adjust to the element container, you can use vh and the fonts will then increase or decrease with the view port.

[@ashokreddy2982]

Iam literally wondering this excellent video is free for us. I used to have some very basic knowledge in responsive but after this i just really improved a lot

[@nickvolt2816]

Viewport 320 is a minimal for most popular devices now, but I bet you can find modern device with screen under 4 inches (Unihertz Atom, Qin F21, F22) where viewport is probably under 300. So good idea is to check page under 320 - to 240 (less is really uncommon and hard to use). Most of modern devices would be about 360-380 or even 420 on devices near 6.7 inches. But also I've noticed that some producers don't use any regular values - I found device with viewport 417. I don't know if it was from start or was it because user has changed font-size in device settings (I'm guessing that to prevent from having big letters in small boxes device producers override font-size settings with viewport settings). BTW: You can set your device to use selected viewport (at least on Android). Turn on developer settings (7 times tap build version in "about" section), and then in developer menu set "smallest device width" to what you want. Be careful - setting values too big or too small may be hard to fix. Suggested values are between 320 (to have big fonts on pages) to 420. More is still usable but only on very big devices and for people with good vision.

[@mpb0406]

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

[@malhar-ansingkar]

Everyone : liking video after watching Le me : liked just after starting 😂 Cause I trust Kevin

[@TomasHradckyComposer]

Wonderful. I am less overwhelmed. Many thanks.

[@ChanoManimtim]

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

[@DaCheat100]

I feel like a lot of this advice works great for advertising / marketing / informational / art-and-design-focused websites. However, business sites that require a lot of complex form layout and controls like inputs, selects, dates, sliders, radio inputs with dozens of inputs and lists and such I think we can still benefit from device-specific breakpoints. For example, when I'm designing a page for our enterprise application, I will most definitely target 13" standard laptop resolution (1366px width) as a breakpoint as a lot of our field reps and users will be using these, and then opening it up for when they're in the office on a larger display.

[@dixxixio]

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

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

[@M4st3rCraft]

clamp() is insane, I totally missed that one. I remember how a year or two ago people could only wish such responsive font-size feature existed in css, and we had to use tricks to emulate it.

[@shedrachelurihu4883]

I normally set a default html property for various screen size in px and design my entire app in rem

[@maciejpawlik5821]

That clamp is awesome tip 🤩 thank You 👍

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