HTML5 and CSS3 Responsive design with media queries

In this tutorial I show you how to use media queries to make your website responsive and work across multiple devices and screen widths.
The code is on Patreon:
/ 5546050
.
Follow me on Facebook:
quentin.watt
Follow me on Twitter:
QuentinWatt
Don't forget to subscribe:
/ quentinwatt
Donate on PayPal:
www.paypal.com...
xclick&hosted_button_id=DM496T7CTUYAS Donate on PayPal:
www.paypal.com...

[@vibhutidesigner]

I searched the entire internet trying to find the perfect explanation for responsive websites thinking you didn't have one. AND I LANDED HERE AGAIN! You posted this like 5 years ago damn! You, Quentin, are the best teacher with the most simplified and logical explanation. Thank you thank you thank you!

[@QuentinWatt]

Thank you. :)

[@ArtandPianoTF]

Very good tutorial! I just have a little hint concerning the scaling of pictures: img{width:100%} means that every image will be stretched to the whole screen, even if the original size is smaller. IMHO img{max-width:100%} works better and is scaling down only.

[@QuentinWatt]

+Thomas Fischer Yes, you are are correct. That is a better style rule.

[@ZonkoKongo]

+Thomas Fischer thx

[@ZonkoKongo]

btw nice video really helpful and good

[@fusion5329]

+Quentin Watt Hey if you would have time to respond to my question i would be more than greatful! :) So you know the way you put @media screen and(max-width:960px) or similar do you have to put in the exact same text? I have tried expirment with it but i have to have all of the text in one with that i mean this media and screen thingy. I was just wondering if its possible to put in something else? or a smaller text?

[@MattTravisMedia]

Thomas Fischer Thank you sir!

[@graphicisland5860]

i have been looking for tutorial on responsive website for two days without sleep. i am going to sleep now. this is all i needed. thinks 100%

[@noone-gr4is]

One of the greatest tutorials on web development! You explained everything cleanly!

[@QuentinWatt]

Wow, thanks!

[@sajiraghavan]

Hi Quentin.... Yours are the best of all tutorials I have come across on the net. I am quite a beginner with an Art Background. I am able to understand every point and see them working perfectly making me very confident that I too can create a website. Appreciate your philanthropic nature.

[@bchitala]

Excellent tutorial. In my view Quentin is among the top best web development tutors on KZbin. Gives out his best knowledge without reservation. As a matter of fact, I cannot agree more with other commentators that say he is perfect.

[@MrRight1000]

That was most lovely presentation. I knew the material, but still enjoy watching it. Thanks.

[@chrismachabee3128]

Absolutely Fantastic. From a guy who has had a ton of instructors, you are top 5. Clear, sharp, correct, and great. Thank you. past few weeks studying CSS Gris, Flexbox, Responsive design. I had a few questions. So, I says to meself, I look up Responsive CSS. OK, I find your KZbin instruct video. Ties everything in a nice neat bow. Thanks again, you sir, are the best.

[@flick00]

Fuck yeah... This shit is what I have been looking for, for weeks... Thanks a lot mate... Pardon my language...

[@patrickmadlang-awa2190]

Quetin Watt's Chanel should really grow, for being unselfish with his knowledge..

[@illegalCommunityM2]

Such a great tutorial. Looks like i wont sleep tonight.

[@devanshutripathi9589]

why what are you thinking about

[@alisonedmondson5558]

I was totally and utterly stuck with making my website responsive. I followed your tutorial and it worked!! Can't thank you enough. Assignment due in tomorrow!!!

[@RevafallDCUO]

And they say heroes doesn't exist

[@ragn594]

don't*

[@charankumar9897]

@@ragn594 haha nice catch ....hero doesn't and heroes don't.

[@aidn_sthu3567]

@@ragn594 lol English is probably not their first language.

[@remnant1018]

Excellent! I asked my teacher what to do about testing/designing for smart phones. I found this video the very next day ☺️ Squeak all you want. I'm all ears.

[@LakshmiDevilifentravels]

Explains so cool and simple.Really loved the way you walked through.Excellent Tutorial.Keep going!!!

[@akshaytomar7030]

i m from India ,i fallow u last 10 month u r just awesome...i like your teaching method

[@prodz1719]

[@bryandelacruz9066]

[@mlsdd]

Where to we add the media screen, on top of the css or at the end?

[@gerwinkuijntjes4738]

Star Cat at the end

[@GaryBarker-cartoonist]

Finally! Someone who can explain coding in a way complete novices like me can understand, thanks Quentin. All I have to do now is figure out how to apply this to my site!!!

[@sjoerdschepers3095]

A like for a man who helps me out!

[@soumen9458]

I must say....!! you're seriously a very good instructor and a teacher...i really loved the way you explained...and i understood every part of it...and because i'm a newbie in website designing...i really got to learn so much ...thanks buddy...!! :)

[@Gallery296.photography]

Linked this tutorial for a Web Design II undergraduate course. Thanks

[@programmingjo]

Hi, Quentin, Your videos on HMTL5 & CSS3 helped me a lot so far. I'm going for IT Web & Software developer, and your videos were and are extremely helpful to me. More than Murach's book. I would like to thank you for your generosity in sharing your knowledge with us. I have to admit. I download all your videos and keep them as a bible for this subjects. Thank you man! You're awesome!

[@jromeroevo]

You are the best . This was so simple to follow.

[@criticalhacker8581]

Jose R I agree, honestly I've never had a better teacher! And when I say awesome I mean it. Awesome work with the video, in my opinion you deserve more then 1mn likes, how dare 100 pepole dislike this video?!

[@intraprisesolutions5496]

Very well done. Just the right amount of information, sizing details, and concepts to enable one to begin playing around, even as display and device sizes change over time...

[@HiDefinition1080p]

@5:50 the media queries part begins

[@devanshutripathi9589]

you are guy

[@jamdownmatket]

You are the only one that I was able to follow and do exactly what you demonstrate. You are a very good teacher you make it very simple. Thank you for taking the time out to do theses video "I find them very helpful".

[@ivano.garcia5222]

Thanks You! Very useful and exactly what I was looking for!

[@devanshutripathi9589]

firstly dude correct your grammar or use grammarly dont keep designing

[@danielromen1858]

So I am a Coder and I really wondered about what I should do at the condition the screensize is under my minimum size. Just a perfect video.

[@susheelindulkar]

JUST PERRRRFECT !!!

[@jacobmade9566]

This is probably the best tutorial on this subject, I havent understood the media queries until now, THANK YOU!!!!

[@arkano01]

simple but very effective!! thanks!!

[@mharrsch]

Quentin, forgive me for coming so late to the party but I'm a retired education technologist and assumed I would no longer be dealing with recoding websites to be responsive to different-sized devices. However, a non-profit for whom I once developed a website over 12 years ago has pressured me to rewrite the website so it can now be viewed on today's smaller mobile devices. Your tutorial has been very helpful and I commend you for your clear instructions. However, I'm having a little trouble getting the secondary media screens to alter display for the much smaller devices to work properly. In your example for the media query designed for a device with a maximum width of 640px, you only copied the CSS for the columns that you wished to display below each other into that media query. On a more complex web page where there are multi-column s both above and below the targeted columns, is it necessary to include all multi-column in that media query to get it to work correctly? Do you have any more tutorials on responsive design that address issues with dynamically constructed content using PHP scripts?

[@wjfox2006]

This was an incredibly helpful video - thanks! :)

[@noelasaji5238]

Guys who take time to share their knowledge are the best!!!

[@QuentinWatt]

Thank you

[@OfficialDevTips]

What is the browser tool you are using to scale the site? 10:40

[@QuentinWatt]

It's the responsive desgin tool built in to Firefox. Keyboard shortcut shift+ctrl+m.

[@OfficialDevTips]

oooohhhhhhhhhhh. cool.

[@simonpatis]

DevTips When using the Firefox responsive design mode I find that using the Shift key is really helpful for incrementing the scale in units of ten ;0)

[@QuentinWatt]

Thanks for the tip.

[@evorty9179]

Lol are you still here?

[@rameshguttula34]

Your Tutorials are VERY EASY to UNDERSTAND and the way of YOUR TEACHING is EXCELLENT.... Thank You Friend...

[@RazacxX]

These days phones can have resolutions up to 2560px x 1440px (larger than most computer monitors). Would this method still be applicable to these types of devices?

[@swallowedinthesea11]

Wow!

[@jacobtodd275]

well adjust ur css media query to those resolutions.

[@rotrose7531]

You are great, though I sometimes try to figure out the these rules by myself, this is the first time that I understand the logic behind it. Thank you.

[@kidsu3678]

It's a awesome tutorial! Thank you :)

[@MohiyuddinShaikh]

This video is definition of clear and concise.

[@creationduwal]

I dont think internet is expensive for somebody if he/she is being a developer and is using a device for programming and designing.

[@synthtv5976]

People are in unique circumstances, circumstances that you know nothing about.

[@synthtv5976]

People are in unique circumstances, circumstances that you know nothing about.

[@SoItGoesCAL34]

Thanks for showing how simple this is. I have a website that needs to be converted to responsive but have been too overwhelmed and afraid to begin. No fear now. I can do this. I have some planning to do in how to display a couple of pages that have a table with 8 columns but no problem... seems like fun. Must look at your other videos for ideas. Thanks again.

[@theatifkhan]

/* Good tutorial */

[@melindabrack]

Thank you Quentin, I've been running in circles trying to work out how to do this. Who would have thought it was so straight forward. Great video.

[@priyankatanwar5681]

Awsom.... :) really very hlpful

[@harrisonkamau597]

I never thought that media queries would be so easy to grasp! Thank you sir!!!

[@sergeynazarov2473]

Conceptual, but not useful... Will be great to do tutorial on real site as landing page and response it from start to end with note as many conditions.

[@QuentinWatt]

Soon.

[@tomvanlier1533]

Great tutorial, I recommend it to start with css3 resp design and media queries. In fact, later today I will start adapting a site to be responsive thanks to this very clear explanation.

[@boldbileg]

We get it... you need money. Get on with the video.

[@studiocity10]

i've been avoiding this vid for 4 months.. So glad i watched it. Thanks , youre a very talented teacher indeed!!

[@raymondsantos6128]

You just save our lives. Thank you for explaining everything thoroughly and clearly. Love lots!!!

[@alexlar23]

congratulations sir you just learned me in no time how to do responsive web design!thank you so much!

[@abdikafimohamud2931]

Thank you so much Quentin. You really helped me because I was confused how to make a website responsive and you gave me the exact answer I needed within short amount of time. I can't thank you enough.

[@mariebrown3532]

Thank you for this very informative tutorial! I am taking my first class in html / css and was having troubling with this process.

[@farzadfara1]

Excellent Quentin. Short, clear and comprehensive to start with "Responsive Design". Hope to see advance tutorials. Thank you.

[@brightsideduo6020]

Best explanation of media queries I've come across. Easily. Thanks very much!

[@Jourden82]

To the point, easy to understand and simple. Thank you. Have answered a number of my questions.

[@noobgamer1562]

I was learning it in an online tutorial bui i did't get the best result ,but by the help of this video i have cleared ,.,.... thank you so much

[@OlovForsgren]

Thank you Quentin, the best tutorial on responsive web design so far. Just in an hour I had a very well working web site, and a template for many more. I need to check out more of your videos.

[@edonl4555]

You are diffferent that others; Simpe and Professional Thanks the best explain ever for Responsive

[@mikemerr]

Not sure why ppl give a thumbs down on this video, this was very awesome! very helpful

[@MrLaxr-op4be]

Your content was so helpful .. my responsive design wasn't working. After watching your video I figured my fault. So, thanks again !

[@QuentinWatt]

Happy to hear it helped.

[@Squamousepithilium]

If they teach like this, why don't I learn plenty of things fast? Very nicely explained.

[@QuentinWatt]

Thank you :)

[@kelvinkipchumbakoech9758]

Wow! Have been looking for way to make my website responsive but this tutor has just taught me

[@marseljgn]

Your tutorials are such a blessing! Thanks you so much! Im watching your html&css tutorials and I am learning a lot. Thank you! Thank you! Thank you!

[@paulcamposgil]

Thanks for all your videos Quentin. Just finished all 52 HTML5 and this one. Great help. Will continue with Javascript and bootstrap now. Keep it up !

[@robertsacamano]

Hey, a good trick is to use DPI in media queries, now that a lot of smartphones are coming wigh high-res screens, and that kind of mess our use of resolution. Great tutorial btw, clear and precise.

[@me-jk9rl]

Awesome lesson given ever..Even the beginners could easily understand this video!! Hats of yu Quentin.. Hope this video makes everyone a good web developer...

[@jimcoburn7856]

Worked for me. Tried it on another sample HTML5/CSS4 site I was building, and it worked perfectly.

[@charankumar9897]

Shit man , why I didn't know you till now??? Your way of explaining is simply superb. If you explain like this one can easily learn complicated things with keen interest and it's very easy to understand too.

[@QuentinWatt]

:) thanks

[@okijohn7153]

Wow Wow Wow, simple and precise. Thanks so much for saving me all the stress

[@sueholder703]

Excellent, clear and a good pace with awesome explanations!

[@BerrisfordEdwards]

Clear, succinct and to the point. What more could one ask?

[@konstantinsemenyuk5123]

Quentin I love you You're the most informative tutorial guy out here. Thanks

[@AzTreandwealth]

incredibly simple and easy to understand video. Thank you so much Quentin.

[@ikravchik]

Thanks Quentin, a clear and easy to comprehend tutorial. Helped me a lot.

[@northmania5332]

I rarely subscribe to anyone, but after seeing this , there was no way I miss the subscribe button :) !

[@northmania5332]

I even shared it on my twitter. Gratz !

[@QuentinWatt]

Aleksandar Stefanov Thanks! Your awesome.

[@Bart_Depestele]

0:47 this human touch is class man !

[@AlistairEdwards]

Responsive design makes so much more sense now. Thank you!

[@lunarninja76]

This is what I searched for 👌great man 👍👍

[@davidmack9842]

Your tutorial skills are excellent. One of the best web development videos I've seen. Well done, and cheers!

[@EnglishVocabularyBooster]

Very good! Thanks a lot for video! While others teaching this for hours and hours, you made it clear in 15 min.

[@pacaron714]

Stunning how that works.. and it works very well. Thanks Quentin for the 'easy to learn and follow' lesson. I couldn't find the source code so I typed it from the video AND I subscribed.. I want more!

[@nuralam-lx8gf]

i have seen lot of tutorial with various language but your tutorial is seems to me very useful to understand. i wana salute you once again! and also have to say...love you broooo...

[@walidcoco]

Gooooood stuff for beginners mate. The only issue is always the fluid layout of the image itself. At smaller screen size, most UI designers are forced to derive another IMG src so that the bigger image is not completely squished out and looks totally distorted. Images and Videos are usually the pain points at much smaller screen size....fwiw.

[@chetankumarbudanpur5231]

Informative video for beginners. More curious to learn more. Thank for sharing.

[@jasonroy2308]

Thanks for letting me know about Audience Retention. I used to download the videos since I have to refer back to it. But from now, I'll make sure I watch it on KZbin. :) You deserve it, bro.

[@karimtahraoui3344]

DUUUDE you make it very clear in 15min !!! you just got a new subscriber you rock my man!

[@sarojbudhathoki8786]

6 years ago and it is still helpful for me :))

[@QuentinWatt]

Glad to hear that.

[@softnstyleify]

Quentin Watt, I really liked your video as well as your way of communication & guideline. Great work. I hope, we may have more good work from you soon.

[@ScifiGuitarguy]

Great tutorial for starting to learn @ rules in CSS, thanks!

[@artemlobov3685]

Why did I not watch this before, great tutorial, thanks!

[@taylak8351]

thank you so much for explaining all of this. I just can't seem to get mine right though... as if it isn't seeing the media query regardless of what I do... so frustrating but thanks for putting this so clearly.

[@AJCollinsAuthor]

Fabulous. Clear and concise tutorial. Well done.

[@daveelderdotcom]

Quentin, Once again I want to thank you. A year ago, I felt I was facing a major uphill climb, since I had 3 websites to convert to mobile-friendly designs. Then I watched your video, and within days, I was already putting 1 of the 3 together using your template. Within a few months, I had both my book site (mentalpushups.com) and my film site (theviewfromheredoc.com) completed. It took me a lot longer for my main music website, daveelder.com, because that site has a lot more pages, but I finally got it done back in mid-December, and I feel like your video made it all possible. Thank you, thank you, THANK YOU! -Dave

[@giannidali9226]

Amazing tutorial. Easy to follow. And i was finally able to wrap my head over media queries

[@winurbiamerica]

I like your video. Very helpful for those CSS beginners like me.

[@anandjayaseelan9989]

Thanks a lot... your explanation helped me to understand the concept clearly...

[@bubear254]

Fantastic tutorial!!! Exactly what I was looking for.

[@ashleyseeley7813]

Thank you!! This video was awesome! I am taking an online class and this has been the biggest help!!