HomeОбразованиеRelated VideosMore From: Quentin Watt Tutorials

HTML5 and CSS3 Responsive design with media queries

9306 ratings | 474104 views
In this tutorial I show you how to use media queries to make your website responsive and work across multiple devices and screen widths. Sponsored by DevMountain. Get yourself career ready, check out their website: http://goo.gl/enNbQV The code is on Patreon: https://www.patreon.com/posts/5546050/ . Follow me on Facebook: www.facebook.com/quentin.watt Follow me on Twitter: www.twitter.com/QuentinWatt Don't forget to subscribe: www.youtube.com/QuentinWatt Donate on PayPal: https://www.paypal.com/cgi-bin/webscr?cmd=_s- xclick&hosted_button_id=DM496T7CTUYAS Donate on PayPal: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DM496T7CTUYAS
Html code for embedding videos on your blog
Text Comments (797)
Akash Modak (23 hours ago)
pretty helpful, thanks
Expert Reviews (9 days ago)
Strong like from me
priyanka sharma (15 days ago)
Very helpful tutorial...
Divjot Kaur (18 days ago)
Actually solves the problem. Thanks!
Matt Travis (18 days ago)
Thanks for this video! You’re awesome, and you’ve gained a new subscriber.
A.S. Komagan ASK (19 days ago)
after this first for responsive , what is the next to follow of this first video ...i mean next video to follow
A.S. Komagan ASK (19 days ago)
Really help for beginners
Pasindu Dulanjaya (23 days ago)
thanks man.Amazing subcribed too.
morpheus101a (1 month ago)
Very Informative. Thank You
shahzaib aejaz (1 month ago)
one of the best tutorial great job
david ryan (1 month ago)
It’s a very interesting and useful video about web development . I have also found some interesting thoughts here https://www.employcoder.com/ Have a look at it. I think it can complement this video a little.
Billy Lowe (1 month ago)
Quentin: Would love to hvew you do a "Company As Seen in....." page. A press/media/credits brag page. And best practices on BREAKING UP pages full of copy. Thx
CUBE noob (1 month ago)
Let me quickly download this video
ioan iulian (1 month ago)
Hello, thanks for the tutorials. Are there any more in this series?
Dj Rvs2 Kk (1 month ago)
Thanks bro
Sohan Jethuri (1 month ago)
Thnk U sir😀
Denzil Anderson (1 month ago)
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".
Dean Hitgano (1 month ago)
simple yet amazing. thanks for the video. this is the kind of tutorial i need.
Mr Perfect (1 month ago)
Helps a lot tnQ
Mister Garage Door (1 month ago)
very useful
Ajaxxx (2 months ago)
Very helpful! Thanks.
Darwiesh Mustafa (2 months ago)
thx a lot its really useful and helpful video with simple way
BENJAMIN DOTSE (2 months ago)
am blessed watching this video
lokesh venkatesan (2 months ago)
One small request, In firefox, "text only zoom" troubling the sites text very often. Would like to get some guidance on it. Sorry to go off the topic from the current video.
lokesh venkatesan (2 months ago)
Really helpful. Thanks a lot!!
David Mack (2 months ago)
Your tutorial skills are excellent. One of the best web development videos I've seen. Well done, and cheers!
graphicsite (2 months ago)
Awesome, Thank you!
J. Angel Reyes (2 months ago)
Thank you.
sanjay Nath (2 months ago)
Thanks Sir, just what I want to understand for long time
Louis Rai (3 months ago)
Dang! Superb ! nice vid
forevered (3 months ago)
Excellent video!!!
Pritam Mehta (3 months ago)
thanks alot
Md.Mosabberuzzaman Ovi (3 months ago)
Hello! I am professional web designer/front end developer.i am expert in #Html5,#Css3,#jquery,#javascript,#bootstrap4. if you suffer bux fixing/error problems in your website. you check out my gig. Here is this link https://goo.gl/4FT9wS "Thank you"
Oran Ben-Avi (3 months ago)
Thank you so much. The tutorial has been really helpful.
Angel Manuel Latas Lugo (3 months ago)
You have saved my life. Like and thank you so much.
Dina C (4 months ago)
What is the size of your Banner img? I added an img and tried to change the height & width, but it didn't work.
Kan Princess (4 months ago)
thank youbso much buddy i was finding for this from last 1 week ... now i came to understand how to make responsive
music menia Negi (4 months ago)
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
Vishal Dhar Dubey (4 months ago)
Thanks a lot buddy, it really helped me a lot.
sadia habib (4 months ago)
Searching for 30 minutes and finally found what I want
Physics Channel (4 months ago)
This is awesome, cheers buddy.
Huseyin Kizil (4 months ago)
Thank you !!
Sumra Yasmin (4 months ago)
awesome!
Trinitrophenylnitramine (4 months ago)
What you could have done also is instead of using px on the container and id's, you could have used percent. Set the width of the container to 100%, then set the width of left-column to 70% and right-column to 30%. Then use percentage for the rest of the elements you plan on adjusting for the responsiveness of your website. I tested both px and % and % seems to work really well for me.
Ahmed Yakub (4 months ago)
Your the best 👌👌
Akhil Bolsekar (4 months ago)
Thank you ..helped me to learn basics of responsive design
Sam Jackson (4 months ago)
hey Quentin... I need little help from you. My website header manu's are not coming when i try to open them in mobile. how can i fix it?
HA RI (4 months ago)
it is the exactly video that i want thanku so much sir
Charlotte Gray (4 months ago)
Thank to so much for this super helpful tutorial! This is exactly what I needed! 🙌🏾🙌🏾
Hendrick Putra (4 months ago)
Great tutorial! Keep it up!
flameout12345 (5 months ago)
hey is there a way to have a image to fit all ratio? but without distorting it
Mona Gulapa (5 months ago)
Thank you for sharing your knowledge. This is very helpful. :)
Jay Dee (5 months ago)
How does that work with tables in HTML webpages??
calvin (5 months ago)
Thank you...
Daniel Beats (5 months ago)
it doesn't work for me,it's not scaling and i did it exactly like in the video
Liviu Enachescu (5 months ago)
Thanks a lot! Great job with this tutorial!
MemorizeAndLearn (5 months ago)
Excellent. thank you!!
Uchenna Nwosu (6 months ago)
Good intro however more explaining is needed about syntax and semantics of media queries.
Mahesh Patil (6 months ago)
u made it so much easy..thanks...
s mg (6 months ago)
thanx for saving my day ....
Chris Machabee (6 months ago)
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 YouTube instruct video. Ties everything in a nice neat bow. Thanks again, you sir, are the best.
Mike Maloy (6 months ago)
*Very* helpful video. Thank you so much! :)
msaldev (6 months ago)
thanks
atul gupta (6 months ago)
what about the height?
Nage Ronald (6 months ago)
Very thanks....it’s very nice tutorial superb
Star Cat (6 months ago)
Fail. I couldn't do it.
.kuro_ウ (6 months ago)
Thank you so much for explaining :)
Danu Alwis (6 months ago)
Thanks man!! that's a realy good tutorial!
Veekay J (6 months ago)
Awesome bro It's really going to help me
Ravishankar Paranthaman (6 months ago)
Simple and clear explanation
Mijanur Rahaman (6 months ago)
nice bro
Mijanur Rahaman (6 months ago)
very very good
Nikhil Sinha (6 months ago)
how to create Attached is an image of a screen which you need to develop in a responsive mode (usable across all kinds of devices) using HTML, CSS, and Bootstrap please help me
Star Cat (6 months ago)
Very happy with this tutorial, thank you.
Josafá Dieb (6 months ago)
already has my like why is using in notepad++
SoItGoesCAL34 (6 months ago)
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.
MARTIN CHANNEL (7 months ago)
Nice and good tutorial.. my english is not good.. but in your toturial..i can understand how to make responsif website..thank very much.. btw..i am from indonesia..
Uwaila Ekhator (7 months ago)
Very Helpful Tutorial 👍
David Lamptey (7 months ago)
wow. Thanks alot
nether winds (7 months ago)
Will this fix AMP issues that analytics alerts you like: major content mismatch, and invalid css stylesheet (sees this in the consosle) ?
Oyedokun Dolapo (7 months ago)
Absolutely nice
Sandeep Kumar (7 months ago)
Really good video!
Som Bismaya (7 months ago)
Hi! I am really confused ! When I used the following code in my css:- @media screen and (max-width: 600px) { body { background-color: lightblue; } } and resized my app preview to less than 600px, the change ,i.e. the change of background color from black to light blue, just like flashed for only a second and the preview behaved as if there was no changes in the code! I am really stuck! What could be the possible reason?
xainkhan (7 months ago)
awesome awesome awesome
Abdullahi Hassan (8 months ago)
Thanks for the clarity
gentooforyou (8 months ago)
I found this tutorial very useful :-)
John Green (8 months ago)
Superb, thank you.
Lei Sheng (8 months ago)
Hi guys. I spent hours trying to figure out how to make some media queries that just allow you to essentially detect mobile vs desktop devices. The problem is that just using the width or height is not enough because mobile devices now have such high resolution you need to factor in the dots per pixel or dots per inch otherwise you will detect them as desktop even though the screen is very small. Here's what I came up with, this demo will just print in the browser window what type of media query is matched, but you can replace that code with code to import different stylesheets: <!DOCTYPE html> <html> <head> <title>Media Queries Testing</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> /* Mobile low-resolution */ @media only screen and (max-resolution: 1.99dppx) and (orientation: portrait) { body:after { content: 'mobile low resolution - portrait'; } } @media only screen and (max-resolution: 1.99dppx) and (orientation: landscape) { body:after { content: 'mobile low resolution - landscape'; } } /* Mobile high-resolution */ @media only screen and (min-resolution: 2dppx) and (orientation: portrait) { body:after { content: 'mobile high resolution - portrait'; } } @media only screen and (min-resolution: 2dppx) and (orientation: landscape) { body:after { content: 'mobile high resolution - landscape'; } } /* Desktop */ @media only screen and (min-width: 1025px) and (min-resolution: 1dppx) and (max-resolution: 1.99dppx) { body:after { content: 'desktop'; } } </style> </head> <body> </body> </html> Basically this will give you the option to load different style sheets depending on whether it is a high pixel density (eg. Samsung S8, ipad, kindle, Note 3) vs low pixel density device (eg. Nintendo 3DS, smart watch, iPad mini, etc.) or a large screen (desktop, tv etc.). I've tested all the devices on Firefox Responsive design and they all displayed as intended. This is a very general solution, but you can detect more devices with more specific criteria if you know how. I don't, so this is what I use. If someone has an old desktop or laptop with a resolution of 1024px width or less this will detect it as a mobile site, but I think it is a very small number. For example, if I change my monitor to 800x600 it will activate the stylesheet for mobile low resolution. Feel free to use this code if it helps you!
Gyan Singh (8 months ago)
Ur voice is killing my years
Gaurav phalke (8 months ago)
good work keep it up
adkinsy85 (8 months ago)
Thank you so much 😀
Mishra S Suman (8 months ago)
hey can you teach how to remove a sidebar
Prez Golez (8 months ago)
listen on 1.25 speed
paul badulescu (8 months ago)
Very good Tuto, but still is super confunsing how i will create my web in all sizes . But anyways i got some stuff from this tuto, good job!
Latha Nelapati (8 months ago)
Hello there. Do we have responsive design tool in google chrome like in firefox?
Lalsingh Nayak (8 months ago)
Sooooooooper sir, I really loved it, simple way of teaching
Cooper Geyer (8 months ago)
are u english, south african, australian or just posh indian?
natwat123 (8 months ago)
This video is really helpful. I use a html and CSS template for my website and I noticed that it moves the sidebar below the blog posts when I view it on my phone. I was wondering how it did it as I am new to web development.
jackthebeenstock (8 months ago)
why all these rule. You could just make one rule of 320px; and that would fix it for most kinds of browsers and devices don't you think?
Laila Heilat (9 months ago)
great video

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.