I have a FREE COURSE on conquering responsive layouts πŸ‘‰ https://courses.kevinpowell.co/conquering-responsive-layouts

πŸ”— Links
βœ… Width auto vs. 100%: https://youtu.be/-st14lUQD3U
βœ… Responsive layout practice for beginners: https://youtu.be/JFbxl_VmIx0
βœ… Position absolute and responsive layouts: https://youtu.be/H04P5YXVssE

⌚ Timestamps
00:00 – Introduction
01:00 – Websites are responsive before you write any CSS
03:10 – Avoid fixed sizes for your layouts
08:40 – Avoid declaring things you don’t need
11:12 – Viewport units won’t solve most of your responsive issues
12:50 – Letting the browser do the heavy lifting
19:10 – There are times you will need media queries

#css

Come hang out with other dev’s in my Discord Community
πŸ’¬ https://discord.gg/nTYCvrK

Keep up to date with everything I’m up to
βœ‰ https://www.kevinpowell.co/newsletter

Come hang out with me live every Monday on Twitch!
πŸ“Ί https://www.twitch.tv/kevinpowellcss

Help support my channel
πŸ‘¨β€πŸŽ“ Get a course: https://www.kevinpowell.co/courses
πŸ‘• Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
πŸ’– Support me on Patreon: https://www.patreon.com/kevinpowell

My editor: VS Code – https://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 YouTube channel, make sure to follow me on Instagram and Twitter.

Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://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!

source

27 Comments

  1. Like this approach, but on your products, when one drops to the line below (minmax 250px, 1fr lesson) and it doesn't have a partner to share the space with, it moves to the left of the screen and has space to the side. Any way to fix this and centre it?

  2. I'm very new to basic coding, I would just like to say that while I'm doing this off my own back with no one teaching me. Watching and listening to your videos really helps. It's brilliant. Thank you for your time and sharing you knowledge.

  3. Hi Kevin, thank you for all the knowledge you share across the videos and explanations. Recently, I've been seeing a "new type of responsive" known as fluid web design. Do you know about it? Is it different from the responsive? Or what should be some good concepts to have in mind for a fluid web?

  4. hello kevin .. i have a banner i want the height to be 20rem and i want if the screen get wider the height will be taller to be fitting the width what should i i add to acheive that

  5. I'm definitely struggling with the responsive aspect of website creation.
    Like everything needs it's own dedicated space and then it needs to look uniform and if one div shifts over, the text is all over the place.
    It's a mess.

    Any idea on how to use Grid and Flexbox preemptively so that we don't counter such problems when we get to the media query section?

Leave A Reply

Please enter your comment!
Please enter your name here