Responsive design in CSS is difficult to do well, especially if you only ever use media queries. In this video I share my top 10 responsive design tips that go beyond just using simple media queries.
📚 Materials/References:
PostCSS Video:
CSS Grid Video:
Viewport Units Video:
Viewport Units Article:
🌎 Find Me Here:
My Blog:
My Courses:
Patreon:
Twitter:
Discord:
GitHub:
CodePen:
⏱️ Timestamps:
00:00 – Introduction
00:39 – Viewport Meta Tag
02:06 – Media Query Orientation
03:15 – Media Query Aspect Ratios
04:00 – Media Query Ranges
05:25 – Container Queries
09:27 – Custom Media Queries
11:09 – Different HTML
12:20 – CSS Grid
16:15 – Clamp
18:00 – Viewport Units
#ResponsiveDesign #WDS #CSS
4:52 man i wish programming languages had this conditional statement feature, it would be pretty useful
Thanks for the quality content by the way 🙂
“Waiting on Safari”
Man, I’m sick of saying that
You can usually get a site to be like 95% responsive by just not setting hard widths
Loved the grid and the font-size clamp()! This just saved me a lot of time.
Great explanation as always!
Btw, I have a question. Why would we repeat condition, as mentioned, inside Custom Media chapter?
You are frikken brilliant! Everything is always overly complicated when its actually straight forward. Thank you!!
grabe, ibang klase ka tlaga mag explain kyle.. magaling ka talaga.. maraming salamat
what about aspect-ratio instead of minmax?
Great Video!. Please do I need a viewport for react, If yes how do I do it? I am a beginner and my web-page is responsive on my desktop chrome browser but not on different mobile screens when I inspect the page. Thank you.
Love your content bro ❤❤
Just tried working with dvh on a project, and alas, Safari on iPhone XS does not like it. But this was an immensely informative video, thank you!
Assalomu aleikum. usefull video. thank u bro. subscribed 🙂
wow that's cool
Another good concept and great explanation. One topic we're interested in is on designing flexible layout which works with ads and content.
This is great. I found this just on-time when I was asked to convert the web site I'm working on to mobile friendly. Thank you. 🙂🙂
Great content, as always. I'd just like to point out that having a different (simplified) html for a mobile device shall not be recommended ever. It's due to accessibility. All the content should be available regardless on the device type of it's properties. We should not think on terms of desktop and smartphone. The smartphone view is sometimes just highly zoomed site, or split screen view. You don't want users to lose the content on those cases. This is actually in WCAG
Super
initial-scale doesn't change anything for me and i couldn't fix it no matter what. Anyone has an idea?
Sorry, but "width >= 300px" does not differ from "min-width: 300px" 🙂
My FF is 108.0.2 , and it says it's latest version currently…
que video bom
i'm been coding web for about 14 years. But i keep watching videos like this because you never know what you might learn… your font size clamp() is an amazing tip, thank you very much
the @container query selector and container-type property did not work for me, even though I have a chrome browser!
in 2023: flex, grid, css var and custom media queries.
If even 10% of the channels on YouTube were as well produced, narrated, etc. as this one, there would be no need for tutorials anymore because everybody would have learned everything.
Thanks, bro. Some real problem solutions from this video
Misleading thumbnail. Report.
Very useful, so I subbed! Thanks!
I see a Kyle video.. I upvote
custom media, seems similar to css variables?
Great video, thanks for this! I've been battling mentally what is the best approach to mobile responsiveness – seems you answered my questions!
Brave is as same as chrome (expect that it blocks ads in youtube) right? so if Chrome gets support Brave too will do right?
I’m always blown by your videos
Thanks for the informations
did you miss the card for container queries? I don't see it on my device
clap() for font size is not compatible with designers. They throw a temper tantrum if you mess with their precious layouts. Lol
Love ur content, brother from 🇮🇳. Your videos are really helpful in becoming a full stack web developer.
Thanks Kyle. Not sure if you have addressed this before but can you do a video on the best way to jump to a location on a webpage. One thing that affects the jump destination location is a fixed top menu or header. What is the best method for making the scroll to / anchors work reliably every time.
Thanks for share!
I love container queries, but browser support is just too low yet. 70% is nice, but that DOES mean that your page will be completely broken on 3 out of 10 devices – inacceptable!
It's on my radar, but nothing I see myself using anytime soon.