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!
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.
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 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 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 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
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!
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!
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 : )
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 RUclips channel. Am grateful
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.
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...
This is a pretty cool tutorial that explains how this works well but the problem is not how it works but how to use it. Let me explain what I mean. When someone is going to be designing a website they are most like going to be using the @media queries in order to make their website more responsive to make it work better on all kinds of devices like phones & tablets. What would be cool is to have explained how to find the right values for max-width and height for these devices and how to appropriately decrese and increase fonts and other values in order to make websites more responsive. Understanding how @media query works is easy on its own but how to make a website responsive is quite enigmatic for me at this moment.
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.
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!!
Hi Kyle, can you please share what is the plugin you were using on the right side of your screen, where you could manually change the screen size with pts specified?
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
Dude, short and concise, simply beautiful! Subscribing was never this easy and needed :D
Oh man finally someone who explained it in less than like 45 minutes, THANK YOU and I'm subbed 👍
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
Simple and straight to the point ,as always.
Thanks Kyle!
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 ~
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 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 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 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
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!
You saved my life in just 7 minutes. Wonderful job brother.
This video is exactly what I’ve wanted !!
Simple, easy to understand, concise, essential...
Thanks Kyle! I’m really happy to find your videos
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.
We actually subscribed today to your channel since over 5 of your videos we have watched. Thanks for the good work.
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!
thank you so much for this. Very easy to follow very well said :)
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 : )
That was a very clear explanation. Thanks for sharing.
Had no idea that orientation was a factor with media queries. But it makes perfect sense.
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 RUclips channel. Am grateful
this is somehow entertaining to watch, l don t even feel like l am studying xD
Dude, your course is so clear. Thanks so much. Keep on going!
Exactly what I needed. Thanks!
Thanks! You help me a lot! Don't understand ever, but now it's clear
Thank you so much, you're the only one who taught what these @media mean... thank you 😊
brilliant insight, I watch your videos to fill in the gaps of my cheap courses
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.
I love the way you explained this. Easy to understand, and straight to the point. Thanks for your Intel.........
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...
Great freakin job dude. Simple, yet very informative.
Your videos are really helpful. Clear, to the point, no assumed knowledge. Keep it up.
You've got a real talent for clearly explaining things. Always enjoy your content!
I feel the simpleness now, thank you
I'm impressed with the amount of information and diferent scenarios that you were able to cover in only 7 minutes
You made this look so easy 🤞👍👏
Thanks
I do have a short attention span, watching all your videos help me to understand better about coding.
This is a pretty cool tutorial that explains how this works well but the problem is not how it works but how to use it. Let me explain what I mean. When someone is going to be designing a website they are most like going to be using the @media queries in order to make their website more responsive to make it work better on all kinds of devices like phones & tablets. What would be cool is to have explained how to find the right values for max-width and height for these devices and how to appropriately decrese and increase fonts and other values in order to make websites more responsive. Understanding how @media query works is easy on its own but how to make a website responsive is quite enigmatic for me at this moment.
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.
Been stuck on media queries over two weeks until i came accross this video, thanks man. Love from Nigeria😇😇
Wow! Your video is very very simple & easy to learn. I can't understand this topic better than this.
i loved this video. finally made me understand how simple media queries really are. to the point. no unnecessary complications.
Please also elaborate on what screen sizes should be definitely covered to get perfect layout on all screen sizes
Dude, you making my life alot easier. Thank you!
Quick and easy, thanks dude, i have exams regarding media querries this definitely saved a lot of time !
Thank you very much! Your videos always help when ever I have a problem. Short, simple and straightforward.
Great short video. Very helpful. Thank you!!
Straight to the point!
WOW. Very nice and very simple video. Thanks a lot 🙌🏽
This literally saved my project from the recycle bin.. ❤️❤️❤️❤️
Do you have a video for properly styling the print sheet using css? For example you wanted to print the form with a nice design. ..
YEAHHH NOW I CAN MAKE MY WEBSITES RESPONSIVE!!! YEAHHHHH!!!!
thanks man.
Learned Media queries. Thanks to Kyle for explaining everything in the best way possible. Kyle simplifies!
i love your videos very useful in short version, thank you
quick, simple and to the point, thank you
Wow what a great video!
Thanks from Brazil :)
This video earned my subscription. Thank you very much. Precise and clear explanation, no bullshit talking. 👍👍👍👍Keep growing.
you did a great job here. Deeply appreciate this KYLE
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
RUclips and sponsors should pay you more! Thank you for this..
what extension did you use to resize the page? awesome video!
Thank you so much for this simple quick and easy tutorial! I learned exactly what I needed to know.
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 so much. I have figured out after watch your video.
Great work Simplified!
This is how all videos should be, straight to the point! Thanks hero!
Different selectors in media query : orientation , print , max-width , max-height
Great video, straight to the point.
Very crisp and explained a lot of context in very minimal time. Appreciate your effort.
So, so easy to understand. Trying to learn this as something to put on my resume. thank you, brother!
thanks bro, really simple to understand and straight to the point!
thank you bro for the simplified explaination of media queries
wow...just..wow. Demystified in 7 minutes....SO TRUE!!!!!!!
omg you're so good-looking and smart. Thx for the simple and explicit tutorial!!
Crystal clear, quel bonheur !
I'm trying to figure out who's better, you or TheNetNinja. Because you guys ROCK.
great video, concise and contained all the information i needed
Hi Kyle, can you please share what is the plugin you were using on the right side of your screen, where you could manually change the screen size with pts specified?
Happily subbed. Thank you so much!
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.
GREAT VIDEO !!!!!! DIRECT TO THE POINT.
You deserve al lot more subscribers, i am gonna always say this. Thank you for the content.
Thank you so much KYEL😇.
You really made it simple.
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.
You might put this code in the html head section:
Without this code (or similar to this;) ) media query will not execute properly.
You forgot to add " Thank me later :D " after the last sentence
You are amazing man, genuinely. Thank you for this channel.
This channel is making things easy for me.... Thanku soo much....
Your explanation was very clear and making good understanding
Great explanation
Nice and short and to the point
Max-width confused me now I get ir
Every time I come here , I learn something new!!😅
Simple and straight forward.
Thanks for this lol. Youve saved me a ton of time trying to figure this out reading docs!
You nailed it bro... My knowledge after watching this, increased.
your explanation method is really good
Excellent, it worked here. Thanks. My issue has been resolved.
you are the best tutor bro please keep uploading such videos
Thank you for this explanation. What program are you using where you change the size of the screen?
He's using Google Chrome Dev tools. You can open it by pressing CTRL + SHIFT + I and you can enable mobile view by pressing CTRL + SHIFT + M.
Google chrome, just right click your mouse and choose inspect elements
My video tag was over the screen on my phone, tysmm!
It was really simplified. Thanks brother.