I am trying to grow my channel, so support and #subscriptions very much appreciated :) Thanks for watching and hope you liked and learnt something new!
Blown a way, buddy declared variables in CSS 🙌🏼 second time I see anyone do that and I've completely forgotten about it. Great explanation of media queries.
I'm a backend dev with good experience but for my current job I have to create frontend too and Adrian your videos helped me a-lot, thank you for your tutorials.
My only questions are: 1) how do we define what the screen size is already to then apply the style rules we would want via our property requirements? ( I'm aware of using inspect, but when we've began designing for desktop/laptop view with our fixed with and height requirements how do we know what their true value is?) 2) what are the roles min and max width play in relation to the original screen size to then apply them in media queries? Thank you so much for explaining this clearly
Hey, I’m also quite new to web development but I generally like using my browser’s mobile emulator (I use Edge, but most common browsers should have one). It also allows you to set custom screen sizes.
@@a_green_cat I'm so happy I learned this a year later. However I still struggle with understanding page constraints box model wise. Are you on discord?
Thank you sooo much I was looking for this type of videos to help me finish my website. I am new to coding trying to learn media queries and your video gives me the answer. you gained alike and a subscriber
Thanks a lot for this. This has saved me life. I am currently working on a school project and need my website to be responsive for mobile. Thanks Adrian
I've made a music application which works perfectly fine on desktop but when I shrink the screen size to around 600px, everything got messed up. Thanks for your tutorial Adrian. You have earned one more subscriber!!
How are you viewing changes to your web browser in real time? The CSS previewer in VS isn't working for me, when I run my code it doesn't show real time changes, requires a refresh.
Thank you Adrian. My breakpoint declaration is not working, I declared my breakpoints in my root selector and it’s not working at all. Please help me out. Appreciated.
I am a bit confused with the split screens. The definition of the screen sizes e.g $desktop... where do they go? must they be on a separate css file? or does this work with internal styling?
how check your layout or tags preview without hovering css selector from browser devtools.. how could you from code editor that. when you typing show a blue preview shadow outside of tags or layout. is it an extention or built in features?
When I do $desktop:1200px; $laptop: 992px; $tablet:768px; $phone:480px; My css file shows error stated that unexpected token '$' and Expected a 'FUNCTION' or 'IDENT' after colon. What can I do to fix it? Thanks!
@@AdrianTwarog yes I found the problem good nights sleep pointed out super silly one too I had the css going without a end bracket in a section it got misplaced to bottom
Hi Sir ..I want to Learn Responsiveness But I have watch So many videos unfortunately I did not got any concept When I watched Your this video then As soon as my interest enhance Because of you ..But Please Sir guide me How to learn more and more ..You are my spiritual Teacher .. Please Sir this is not a such comment ..when I not learn any thing then I go in depression mode then my blood pressure shoot after
great video, i particularly liked the way you organised your CSS code, i'll be using that going forward. one question though, you use PX for everything, but a lot of advise is to use EM or REM, What is the correct or best practise, when organising fonts and elements? thanks
Ok cool but what do you do if IT DOESNT WORK. Ive been stuck for 2 days now on a simple project i have built and just need the media queries to work so that i can move on. Use to use it all the time but have been doing node stuff recently now i completed this project and nothing i do is making it work. I followed your simple code in the body @media and tried to change my background to red ...nothing soo frustrating i cant figure out why its not working. Everything im doing is front end apart from my AJAX request which is also fron end but its getting data from an external server which has nothing to so with it
Thank you so much, but I have a question please. How to insert the same width, size at the ends of the screen (left and right) as on your video, so that when the screen is enlarged the size of the ends does not change ? Thank you.
so as far as I understand this isn't an automatic process but you need to basically design from the beginning for different screen sizes? Like checking in your browser or any responsivenator how does it look like and then apply the changes needed? Is there any way to check those breakpoints? I struggle with pixels. How should I know how many pixels a given screen has?
Thanks for the video, I like the variable setup don’t know you can do that. Why not create a separate sheet for queries, like a media-query.css and separate concerns would make it easier to read/follow.
@@AdrianTwarog wow. Thx for replying! I meant, if I do @media (max-width:550px) { Background-color: red; } For example. I want background to be red on my phone. But my phone has 1080x1920px screen. How will max-width work with that? Sorry for bad English. Love you so much from Kazakhstan)
@@JustKenny1 yo kenny. i literally have to upload my we development in 3 days so im literally asking random people for help at this point. But ive literally done the exact same media query as the guy who made this youtube video but theres literally no changes being made on my website. (btw ye i did add the meta name="viewport" etc etc at the top of my html file. if you could help me out with this bro your a legend
Thank you for all your tutorials. So helpful. I am in learning mode, so I hoping you would be willing to let us know the following. I believe this is a Media Query question. I have 4 different full screen videos one for each breakpoint. How do add each one to the assigned breakpoint?
Hey Adrian, thanks a lot for the video. But when I use the @media inside BODY, there is no effect but if I move them outside BODY and create multiple BODY it works. How come your version is working?
bro im gonna shoot in the dark here and pray to god you see this but. (I've subbed btw and watched your other videos xD) Right so i'm literally trying to do some media query and it does not work. I wrote the exact same thing as you. Also added at the top of my html file content="width-device, intial-scale=1"> So why is the media query making no difference? If anyone can answer this. I'll be grateful
I love your videos! Perfect for a beginner like myself who is trying to see how the pros do things. Just one part I was confused about: At 10:30, why was "min-height" used? (I was expecting "height" to be used). Thanks!
![Media Query in CSS [Easiest Way] | How To Write Media Queries FAST](http://i.ytimg.com/vi/xgGg4XQxTWk/mqdefault.jpg)
I am trying to grow my channel, so support and #subscriptions very much appreciated :) Thanks for watching and hope you liked and learnt something new!
Can you make that file available to download
Your editor pls ?
Sure!
wow thanks for great video. Can you share the source code in this video?
Hi, what editor are you using?
it is a very nice video with good explanations, the only thing I would wish for is to have your html and css in the description to follow along.
All I can say is Thank you.....from the bottom of my heart...as I'm in the middle of the biggest suffering of making my website responsive...!
Blown a way, buddy declared variables in CSS 🙌🏼 second time I see anyone do that and I've completely forgotten about it. Great explanation of media queries.
I'm a backend dev with good experience but for my current job I have to create frontend too and Adrian your videos helped me a-lot, thank you for your tutorials.
My only questions are:
1) how do we define what the screen size is already to then apply the style rules we would want via our property requirements? ( I'm aware of using inspect, but when we've began designing for desktop/laptop view with our fixed with and height requirements how do we know what their true value is?)
2) what are the roles min and max width play in relation to the original screen size to then apply them in media queries?
Thank you so much for explaining this clearly
Hey, I’m also quite new to web development but I generally like using my browser’s mobile emulator (I use Edge, but most common browsers should have one). It also allows you to set custom screen sizes.
@@a_green_cat I'm so happy I learned this a year later. However I still struggle with understanding page constraints box model wise. Are you on discord?
Thank you sooo much I was looking for this type of videos to help me finish my website. I am new to coding trying to learn media queries and your video gives me the answer. you gained alike and a subscriber
Thanks, Adrian. it's one of the best videos with an effective demonstration.
Thats awesome!
Thanks a lot for this. This has saved me life. I am currently working on a school project and need my website to be responsive for mobile. Thanks Adrian
I think this is the best CSS tutorial I've ever seen, thank you, Adrian, so much.
Oh man I have so much to learn. Its exciting and intimidating at the same time lol.
Crystal clear and straight forward. Thank you!
awesome!
your teaching skill is best. you teaching us with easiest way
Glad to hear that
I've been looking answers for my questions regarding media query. You video answered it all. Thank you.
Glad it was helpful!
One of the best explained about responsive website thnq very much sir for clear my doubt
I've made a music application which works perfectly fine on desktop but when I shrink the screen size to around 600px, everything got messed up. Thanks for your tutorial Adrian. You have earned one more subscriber!!
This was an amazing tutorial on media queries - straight to the point and very well done - subbed and cannot wait to see more
Short and concise.
Thank you for your kind help.
AMAZING thanks for youtube for showing this besttt tutorial using @media
That's cool very much interactive and smooth.
Thank you for making me a little smarter today ❤️
Just learned about $ variable in CSS today.
This a good variable
thank u so much adrian dude, really helped for coding and listen English carefully to improve😁... all was very good!!
Thank you, sir. With the help of you, I could finally understand the concept.
Great to hear
How are you viewing changes to your web browser in real time? The CSS previewer in VS isn't working for me, when I run my code it doesn't show real time changes, requires a refresh.
Thanks for the detailed tutorial.
You've got my like and subscribtion already.
Really appreciate this video! Thank you!
Thabks!
Good jobs MASTER ANDRIAN
This was a great and simple one. Thanks! And also let's subscribe.
if I put $desktop:1200px; to assign px in my CSS, it comes up as an error. "identifier expected". Why is this?
Thank you Adrian. My breakpoint declaration is not working, I declared my breakpoints in my root selector and it’s not working at all. Please help me out. Appreciated.
This is great info for a designer working with developers. Thanks
This has helped me immensely. Thank you Adrian.
Amazing video, thanks Adrian.
Cheers!
Excellent, but why a desktop size is 1200px? i don't understand because my laptop has 1366px and all my desktop monitors have minimum 1920px width
I am a bit confused with the split screens. The definition of the screen sizes e.g $desktop... where do they go? must they be on a separate css file? or does this work with internal styling?
thanks you you solved it for me bro
god bless you🌷
how check your layout or tags preview without hovering css selector from browser devtools.. how could you from code editor that. when you typing show a blue preview shadow outside of tags or layout. is it an extention or built in features?
I have question..
Why u can write css with pseudocode ? This scss ?.
Bcs i trying css using pseudocode error.
Pseudocode :
.title{
.sub-title{
}
}
Good point, luckily scss is being built into chrome and browsers these days!
Thank you, Adrian.
Great video! thank you!
my css files won't accept $desktop or anything after the "$" (css identifier expected) Anybody know an easy way around this?
Very clear explanation, thank you
Thank you very much sir
For your tutorial
What a great video you explained this topic awesome thanks Adrian!!
Why my media query nesting on body selector not working like yours? plss answer me
I’m running Scss that might be the reason
When I do
$desktop:1200px;
$laptop: 992px;
$tablet:768px;
$phone:480px;
My css file shows error stated that unexpected token '$' and Expected a 'FUNCTION' or 'IDENT' after colon.
What can I do to fix it?
Thanks!
Samantha I am using SASS so make sure you have a compiler to change it into CsS
@@AdrianTwarog got it! thank you
So I have the same features on a webpage but when I enlarge window (bigger then half page screen) it disappears pretty css and shows only html
Same css?
@@AdrianTwarog yes I found the problem good nights sleep pointed out super silly one too I had the css going without a end bracket in a section it got misplaced to bottom
Hi Sir ..I want to Learn Responsiveness But I have watch So many videos unfortunately I did not got any concept When I watched Your this video then As soon as my interest enhance Because of you ..But Please Sir guide me How to learn more and more ..You are my spiritual Teacher .. Please Sir this is not a such comment ..when I not learn any thing then I go in depression mode then my blood pressure shoot after
Thank you so much! I learned a lot
Thank you!!!! My code is now responsive!!!!
great video, i particularly liked the way you organised your CSS code, i'll be using that going forward. one question though, you use PX for everything, but a lot of advise is to use EM or REM, What is the correct or best practise, when organising fonts and elements? thanks
Nothing is best, as per conditions u have to use it. % use for Resposiveness and rem for root element size as compare to parents
Very clear about explain thank you so much.
Great!
Clear and simple 🙌🙌
wow. it helps me a lot! thank you so much. u so good at explaining
Coming in clutch
Very concise! Thank you
it's really helps.....keep going
👍
Great stuff, and, yes, you have a new subscriber.
Ok cool but what do you do if IT DOESNT WORK. Ive been stuck for 2 days now on a simple project i have built and just need the media queries to work so that i can move on. Use to use it all the time but have been doing node stuff recently now i completed this project and nothing i do is making it work. I followed your simple code in the body @media and tried to change my background to red ...nothing soo frustrating i cant figure out why its not working. Everything im doing is front end apart from my AJAX request which is also fron end but its getting data from an external server which has nothing to so with it
I know this is late but can anyone tell me how he has the web page window on the size of the screen and it doesn't automatically close out? Thank you
how you highlight the elemen in browser while you edit the code on text editor ?
Hi! that auto refresh is fun! and it saves so much time. I wish I knew how to have this!
Agreed!
My website looks great for 1920x1080 but the design breaks on 2560x1440. Is there a way to fix that with media query or any other way?
Thank you so much, but I have a question please.
How to insert the same width, size at the ends of the screen (left and right) as on your video, so that when the screen is enlarged the size of the ends does not change ?
Thank you.
Very good video, really informative!
good explanation bro👍👍👍👍👍👍👍
Thank You Sir
Thank you so much.. that was very helpful 😍❤❤❤
so as far as I understand this isn't an automatic process but you need to basically design from the beginning for different screen sizes? Like checking in your browser or any responsivenator how does it look like and then apply the changes needed? Is there any way to check those breakpoints? I struggle with pixels. How should I know how many pixels a given screen has?
Thanks. Great video
Very nice tutorial great skills!
Thanks!
Thanks alot this was helpful
Great!
That was helpful 😌
Nice Adrian: my question is what is that awesome program you are typing in. I can see that would really help me.
Thanks a lot
Very good friend. I'd like you to tell about units and responsiveness. Thanks a bunch
Thanks for the video, I like the variable setup don’t know you can do that. Why not create a separate sheet for queries, like a media-query.css and separate concerns would make it easier to read/follow.
Good point!
What about 1080p phones?
How do I media query that?
Pc is 1080p and my phone is 1080p. I can not do minmax properties.
How do you mean? If their 1080 then they can display everything right?
@@AdrianTwarog wow. Thx for replying! I meant, if I do
@media (max-width:550px) {
Background-color: red;
}
For example. I want background to be red on my phone. But my phone has 1080x1920px screen. How will max-width work with that? Sorry for bad English. Love you so much from Kazakhstan)
@@JustKenny1 yo kenny. i literally have to upload my we development in 3 days so im literally asking random people for help at this point. But ive literally done the exact same media query as the guy who made this youtube video but theres literally no changes being made on my website. (btw ye i did add the meta name="viewport" etc etc at the top of my html file. if you could help me out with this bro your a legend
Thanks
So according to the device size each time we have to specify media queries right?
Thanks a lot sir 🙏😊🙏
nice one, love it
thank you :)
im using dreamweaver....and its a struggle because the split doesnt update itself..:(
Thank you for all your tutorials. So helpful. I am in learning mode, so I hoping you would be willing to let us know the following. I believe this is a Media Query question. I have 4 different full screen videos one for each breakpoint. How do add each one to the assigned breakpoint?
I will support u bro
This is the hardest part for me in making a website.
Hey Adrian, thanks a lot for the video. But when I use the @media inside BODY, there is no effect but if I move them outside BODY and create multiple BODY it works. How come your version is working?
Heaps of reasons it might or might not work, hard to say without seeing code, hopefully my example shows syntax of it working that can help?
@@AdrianTwarog I think I know why, you are using .scss and it is fixing that issue for you. Could it be that?
@@TimurCatakli very likely, I have a compiler in the background converting it, otherwise regular css has to be used
Thanks. always big help hope you have a community group fb tg discord or any. where we can talk or ask or brainstorming to other people :D
Yes we do
bro im gonna shoot in the dark here and pray to god you see this but. (I've subbed btw and watched your other videos xD) Right so i'm literally trying to do some media query and it does not work. I wrote the exact same thing as you. Also added at the top of my html file content="width-device, intial-scale=1"> So why is the media query making no difference? If anyone can answer this. I'll be grateful
Nice!!!
Wondering if sass makes a difference than Css to combine it with media inside a class tag 🤔
Why do you changed the background colour?
I love your videos! Perfect for a beginner like myself who is trying to see how the pros do things. Just one part I was confused about: At 10:30, why was "min-height" used? (I was expecting "height" to be used). Thanks!
best video
very helpful
Nice video
What's the editor ? Pls
Whats is the Ide used here? I usually work with notepad++
You can see it in the video! He used Brackets