CSS Media Queries Tutorial for Responsive Design

Learn how to do CSS Media Queries with the latest techniques of calling @media, max-width, min-width to allow your HTML code to automatically adjust its responsive design.

We take a look at media queries responsive web design standards that are used in real-world sites daily. Responsive design similar to bootstrap is important to know especially when you have to make it yourself in situations you aren't using bootstrap responsive layouts.

This Html media query tutorial using css3 is easy and hopefully, this video will show you how to do it.

Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.

Feel free to follow me on:

Software & Discounts:

Computer Gear:

Camera Equipment:

[AdrianTwarog]

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!

[revasseurborn]

All I can say is Thank the bottom of my heart...as I'm in the middle of the biggest suffering of making my website responsive...!

[MrViciousway]

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.

[mariakononevskaya]

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.

[GULSHAN]

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.

[reemalnaji]

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

[SecretEyeSpot]

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

[tajinderjsingh]

Thanks, Adrian. it's one of the best videos with an effective demonstration.

[sabuein]

I think this is the best CSS tutorial I've ever seen, thank you, Adrian, so much.

[medusa]

Crystal clear and straight forward. Thank you!

[NNNedlog]

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

[joedzpadin]

I've been looking answers for my questions regarding media query. You video answered it all. Thank you.

[techwake]

your teaching skill is best. you teaching us with easiest way

[ianhnizdo]

Oh man I have so much to learn. Its exciting and intimidating at the same time lol.

[shrikantjha]

That's cool very much interactive and smooth.

[jaydenmoon]

This was an amazing tutorial on media queries - straight to the point and very well done - subbed and cannot wait to see more

[Pankaj-Verma-]

Short and concise.
Thank you for your kind help.

[aloksharma]

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!!

[sheikhanas]

One of the best explained about responsive website thnq very much sir for clear my doubt

[naitikkathiriya]

thank u so much adrian dude, really helped for coding and listen English carefully to improve😁... all was very good!!