Took me a few min of researching, but if anyone is curious on how he got that tool on his live server browser, he opened up the console and clicked on Device Mode button on the top left. It's like a button with the symbol of 2 rectangles overlapping each other. From there you can choose your device list to test as well as manually move your screen around. Very useful! Thanks a lot for this very well, quickly explained video, Kyle!
@@WebDevSimplified How do you get Emmet to layout an HTML skeleton? From what I have seen, you have to type meta:vp at the very least. Am I missing something?
Straight explanaition. A lot of videos on youtube can't handle this, but you're a master. Watched 2-3 of your videos, but for sure those won't be the last one. Thanks!
I have been struggling with the problem of one part of my website not being well-sizeable for way too long and I found this video as perfect solution. Thank you!
I started coding a few months ago on my own and now I'm doing a certificate program through Mimo for front end development. You made this much easier to understand than other videos I've been trying to learn from. THANK YOU!!
I've used @media query before and I did understand it...but I was always confused and search for explanations and tutorials. This video is the first and last video I'll look at because, well as expected, your explanation was super simple. lol. Subscribed!
I somehow enjoy watching your videos just briefly covering some topics with which I'm familiar with. For this one I would however like to mention that it is extremely common to use *min-width* in media queries. This goes alongside the design philosophy called mobile first. There is less performance overhead for small screen devices which usually just happen to have less performance. Make sure to stay all the way on top. Your increasing channel size is a proof that more and more people will come into contact with such topics through you, therefore it is your responsibility to give it all your best :) Bye ~
I was having great difficulty comprehending piece of css. This Brilliant video, very concise well explained, good clear sound and good quality image has help tremendously. Excellent Many Thanks
Thx for all the tutorials so far. I keep coming back to your channel because your tutorials outshine all the others in every aspect. They're to the point, not too fast or too slow, very understandable, not too long or too short, ... One tutorial I would appreciate to see is how to animate a popup div with zoom/fade in (already found that one with animate in css after display is set to block), but also how to zoom/fade out when you close the popup div before the display is set to none I have already been searching the internet, but I haven't found the answer yet.
I've been learning how to code and not long ago, I felt confident and ready to do a project for a customer. I'm nearly finished with it, but I just realized I have no clue how to adjust the website so it works well on phones and tablets too. That's what landed me here😫. I'm about to incorporate your tips, thank you so much for this video!
Excellent video!! I was under the impression media queries was going to be a painful experience. But you proved that it was actually simple, thank you.
Thanks a lot... Your channel has made me a better developer and has really improved my coding skills. Got motivated last month and I started my own web development TH-cam channel. Am grateful
I will give a shout out to this channel, im trying to improve my frontend skills and i have taken bootcamps and the meta course in course and I find myself coming back each time to his videos. He explain it clear and with good examples.
the bottom selector is preferred if many selectors have the same specificity .that was a very nice and helpful thing that i din know earlier .thanks for that : )
i have learning for almost 3 weeks about media querries and couldnt really understand, but this video in just 5 minutes i have understood everything with a very little energy used...
I saw you have one with advanced css without mediaqueries and thought id check this watchlisted one too. Absolutely love your content, And you!! Thanks for making the web dev easy for us!!
This was a very nice introduction to media queries, and I know what it's "all" about! By the way, anyone else here from an Austin Community College microcredential?
Seems to me that "Media queries" are just CSS "If" statements; like any other "if" statement you would learn in any other programming language. If you look at it that way... it makes this much easier to understand.
Well, I was going to praise your brevity, but I see from the comments that I would be piling on. Thank you very much. I'm hooked. Subbed and liked and rang that bell.
Took me a few min of researching, but if anyone is curious on how he got that tool on his live server browser, he opened up the console and clicked on Device Mode button on the top left. It's like a button with the symbol of 2 rectangles overlapping each other. From there you can choose your device list to test as well as manually move your screen around. Very useful! Thanks a lot for this very well, quickly explained video, Kyle!
Thank you, but the first comment is the same thing
does firefox have this?
@@thirddroneyes bt i relied on chrome for this. Responsive design in dev tools. More tools in Firefox.
I can not find the device mode button, I am on chrome. Any suggestions ?
LoL you have to install live server extension on your vs code
You might put this code in the html head section:
Without this code (or similar to this;) ) media query will not execute properly.
Thank me later :D
Great point. I am so uses to using Emmet for setting up my html and it does that for me
@@WebDevSimplified How do you get Emmet to layout an HTML skeleton? From what I have seen, you have to type meta:vp at the very least. Am I missing something?
@@amyp.575 If you have a blank HTML document and type ! and then hit enter it will generate the boilerplate HTML shell with this meta tag.
@@WebDevSimplified why don't you pin this though? 😅
Emmet does it automatically. But it's good to know.
Straight explanaition. A lot of videos on youtube can't handle this, but you're a master. Watched 2-3 of your videos, but for sure those won't be the last one. Thanks!
Thank you. I'm glad my videos are able to help!
@@WebDevSimplified You're understating it, right?
Or press Ctrl shift m
Oh man finally someone who explained it in less than like 45 minutes, THANK YOU and I'm subbed 👍
Dude, short and concise, simply beautiful! Subscribing was never this easy and needed :D
I have been struggling with the problem of one part of my website not being well-sizeable for way too long and I found this video as perfect solution. Thank you!
Simple and straight to the point ,as always.
Thanks Kyle!
I started coding a few months ago on my own and now I'm doing a certificate program through Mimo for front end development. You made this much easier to understand than other videos I've been trying to learn from. THANK YOU!!
We actually subscribed today to your channel since over 5 of your videos we have watched. Thanks for the good work.
You saved my life in just 7 minutes. Wonderful job brother.
thanks for the quick teaching, u did a gob job, no matter the ones who criticizes and doesn't contribute a thing or making their own videos
I've used @media query before and I did understand it...but I was always confused and search for explanations and tutorials. This video is the first and last video I'll look at because, well as expected, your explanation was super simple. lol. Subscribed!
I somehow enjoy watching your videos just briefly covering some topics with which I'm familiar with.
For this one I would however like to mention that it is extremely common to use *min-width* in media queries. This goes alongside the design philosophy called mobile first. There is less performance overhead for small screen devices which usually just happen to have less performance.
Make sure to stay all the way on top. Your increasing channel size is a proof that more and more people will come into contact with such topics through you, therefore it is your responsibility to give it all your best :)
Bye ~
I was having great difficulty comprehending piece of css. This Brilliant video, very concise well explained, good clear sound and good quality image has help tremendously. Excellent Many Thanks
This video is exactly what I’ve wanted !!
Simple, easy to understand, concise, essential...
Thanks Kyle! I’m really happy to find your videos
Thank you so much. I have figured out after watch your video.
Great work Simplified!
Great freakin job dude. Simple, yet very informative.
Thx for all the tutorials so far. I keep coming back to your channel because your tutorials outshine all the others in every aspect.
They're to the point, not too fast or too slow, very understandable, not too long or too short, ...
One tutorial I would appreciate to see is how to animate a popup div with zoom/fade in (already found that one with animate in css after display is set to block), but also how to zoom/fade out when you close the popup div before the display is set to none
I have already been searching the internet, but I haven't found the answer yet.
Dude, your course is so clear. Thanks so much. Keep on going!
I've been learning how to code and not long ago, I felt confident and ready to do a project for a customer. I'm nearly finished with it, but I just realized I have no clue how to adjust the website so it works well on phones and tablets too. That's what landed me here😫. I'm about to incorporate your tips, thank you so much for this video!
You've got a real talent for clearly explaining things. Always enjoy your content!
Your videos are really helpful. Clear, to the point, no assumed knowledge. Keep it up.
This is how all videos should be, straight to the point! Thanks hero!
Excellent video!! I was under the impression media queries was going to be a painful experience. But you proved that it was actually simple, thank you.
Had no idea that orientation was a factor with media queries. But it makes perfect sense.
I'm impressed with the amount of information and diferent scenarios that you were able to cover in only 7 minutes
brilliant insight, I watch your videos to fill in the gaps of my cheap courses
i loved this video. finally made me understand how simple media queries really are. to the point. no unnecessary complications.
Thanks a lot... Your channel has made me a better developer and has really improved my coding skills. Got motivated last month and I started my own web development TH-cam channel. Am grateful
I will give a shout out to this channel, im trying to improve my frontend skills and i have taken bootcamps and the meta course in course and I find myself coming back each time to his videos. He explain it clear and with good examples.
Learned Media queries. Thanks to Kyle for explaining everything in the best way possible. Kyle simplifies!
Quick and easy, thanks dude, i have exams regarding media querries this definitely saved a lot of time !
you did a great job here. Deeply appreciate this KYLE
TH-cam and sponsors should pay you more! Thank you for this..
Very crisp and explained a lot of context in very minimal time. Appreciate your effort.
Exactly what I needed, thank you !!!
Thank you so much. You are a good teacher and also beautiful. I was constantly distracted lol. Also, I understand CSS media query better. Thanks.
Dude, you making my life alot easier. Thank you!
the bottom selector is preferred if many selectors have the same specificity .that was a very nice and helpful thing that i din know earlier .thanks for that : )
i have learning for almost 3 weeks about media querries and couldnt really understand, but this video in just 5 minutes i have understood everything with a very little energy used...
Thanks for this lol. Youve saved me a ton of time trying to figure this out reading docs!
YEAHHH NOW I CAN MAKE MY WEBSITES RESPONSIVE!!! YEAHHHHH!!!!
thanks man.
Great short video. Very helpful. Thank you!!
Thanks! You help me a lot! Don't understand ever, but now it's clear
That was a very clear explanation. Thanks for sharing.
Thank you so much, you're the only one who taught what these @media mean... thank you 😊
I saw you have one with advanced css without mediaqueries and thought id check this watchlisted one too. Absolutely love your content, And you!! Thanks for making the web dev easy for us!!
Thank you very much! Your videos always help when ever I have a problem. Short, simple and straightforward.
Wow! Your video is very very simple & easy to learn. I can't understand this topic better than this.
I love the way you explained this. Easy to understand, and straight to the point. Thanks for your Intel.........
This was a very nice introduction to media queries, and I know what it's "all" about! By the way, anyone else here from an Austin Community College microcredential?
quick, simple and to the point, thank you
This video earned my subscription. Thank you very much. Precise and clear explanation, no bullshit talking. 👍👍👍👍Keep growing.
this is somehow entertaining to watch, l don t even feel like l am studying xD
Seems to me that "Media queries" are just CSS "If" statements; like any other "if" statement you would learn in any other programming language. If you look at it that way... it makes this much easier to understand.
Well said man.
Absolutely
well sure glad i read your comment before watching the video
Happily subbed. Thank you so much!
You made this look so easy 🤞👍👏
Thanks
thanks bro, really simple to understand and straight to the point!
You are amazing man, genuinely. Thank you for this channel.
Well, I was going to praise your brevity, but I see from the comments that I would be piling on. Thank you very much. I'm hooked. Subbed and liked and rang that bell.
I feel the simpleness now, thank you
I like your face expression when you're explaining things. You are obviously enjoying yourself, and it's definitely contagious! keep on the good work.
can't tell if this is ironic
omg you're so good-looking and smart. Thx for the simple and explicit tutorial!!
So, so easy to understand. Trying to learn this as something to put on my resume. thank you, brother!
Straight to the point!
thank you so much for this. Very easy to follow very well said :)
Thank you so much for this simple quick and easy tutorial! I learned exactly what I needed to know.
Been stuck on media queries over two weeks until i came accross this video, thanks man. Love from Nigeria😇😇
I do have a short attention span, watching all your videos help me to understand better about coding.
so glad to have discovered this channel
You deserve al lot more subscribers, i am gonna always say this. Thank you for the content.
great video, concise and contained all the information i needed
Your explanation was very clear and making good understanding
This channel is making things easy for me.... Thanku soo much....
WOW. Very nice and very simple video. Thanks a lot 🙌🏽
Wow what a great video!
Thanks from Brazil :)
Brilliant...
Thank you so much for that smart video, Men...
🙂
From Brussels, with Love...
Thank you, Kyle! Great stuff for a short period of time.
awesome. you demo actually put my doubts out
Great video, straight to the point.
thank you bro for the simplified explaination of media queries
i love your videos very useful in short version, thank you
you are the best tutor bro please keep uploading such videos
I have no words to say thank you Man. You are amazing.
Thanks man! Short and concise!
Thanks this video helped me to make site easily
GREAT VIDEO !!!!!! DIRECT TO THE POINT.
You're awesome, man! Thanks for making my life a lot better!
This literally saved my project from the recycle bin.. ❤️❤️❤️❤️
wow...just..wow. Demystified in 7 minutes....SO TRUE!!!!!!!
Thanks for the tutorial! It was really clear!
As always, brilliant tut. Thanks so much!
Thank you so much KYEL😇.
You really made it simple.
It was really simplified. Thanks brother.
Simple and straight forward.
What a brilliant young man you are
LIKE
Very helpful, thank you for making this short and sweet tutorial.
This video was the perfect length!
you really simplified things thanks.
i was searching for somebody to explain this, thanks!