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

HTML5 and CSS3 Responsive design with media queries

8787 ratings | 447802 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 (774)
lokesh venkatesan (6 days 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 (6 days ago)
Really helpful. Thanks a lot!!
David Mack (9 days ago)
Your tutorial skills are excellent. One of the best web development videos I've seen. Well done, and cheers!
graphicsite (15 days ago)
Awesome, Thank you!
J. Angel Reyes (16 days ago)
Thank you.
sanjay Nath (16 days ago)
Thanks Sir, just what I want to understand for long time
Louis Rai (19 days ago)
Dang! Superb ! nice vid
forevered (24 days ago)
Excellent video!!!
Pritam Mehta (24 days ago)
thanks alot
Hello World (25 days 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 (28 days ago)
Thank you so much. The tutorial has been really helpful.
You have saved my life. Like and thank you so much.
Dina C (1 month 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 (1 month 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 (1 month 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 (1 month ago)
Thanks a lot buddy, it really helped me a lot.
sadia habib (1 month ago)
Searching for 30 minutes and finally found what I want
Physics Channel (2 months ago)
This is awesome, cheers buddy.
Huseyin Kizil (2 months ago)
Thank you !!
Sumra Yasmin (2 months ago)
awesome!
Trinitrophenylnitramine (2 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.
Saryn Summer (2 months ago)
Need a better mic friend or better settings pre-record. I couldn't watch/listen because of the fuzz from amping up your sound in post.
Ahmed Yakub (2 months ago)
Your the best 👌👌
Akhil Bolsekar (2 months ago)
Thank you ..helped me to learn basics of responsive design
Sam Jackson (2 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?
great videos (2 months ago)
it is the exactly video that i want thanku so much sir
Charlotte Gray (2 months ago)
Thank to so much for this super helpful tutorial! This is exactly what I needed! 🙌🏾🙌🏾
Hendrick Putra (2 months ago)
Great tutorial! Keep it up!
flameout12345 (2 months ago)
hey is there a way to have a image to fit all ratio? but without distorting it
Mona Gulapa (3 months ago)
Thank you for sharing your knowledge. This is very helpful. :)
Jay Dee (3 months ago)
How does that work with tables in HTML webpages??
calvin (3 months ago)
Thank you...
Daniel Beats (3 months ago)
it doesn't work for me,it's not scaling and i did it exactly like in the video
Liviu Enachescu (3 months ago)
Thanks a lot! Great job with this tutorial!
MemorizeAndLearn (3 months ago)
Excellent. thank you!!
Uchenna Nwosu (3 months ago)
Good intro however more explaining is needed about syntax and semantics of media queries.
Mahesh Patil (3 months ago)
u made it so much easy..thanks...
s mg (3 months ago)
thanx for saving my day ....
Chris Machabee (3 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 (3 months ago)
*Very* helpful video. Thank you so much! :)
msaldev (3 months ago)
thanks
atul gupta (3 months ago)
what about the height?
Nage Ronald (3 months ago)
Very thanks....it’s very nice tutorial superb
Star Cat (4 months ago)
Fail. I couldn't do it.
.kuro_ウ (4 months ago)
Thank you so much for explaining :)
Danu Alwis (4 months ago)
Thanks man!! that's a realy good tutorial!
Veekay J (4 months ago)
Awesome bro It's really going to help me
Ravishankar Paranthaman (4 months ago)
Simple and clear explanation
Mijanur Rahaman (4 months ago)
nice bro
Mijanur Rahaman (4 months ago)
very very good
Nikhil Sinha (4 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 (4 months ago)
Very happy with this tutorial, thank you.
Josafá Dieb (4 months ago)
already has my like why is using in notepad++
SoItGoesCAL34 (4 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 (4 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 (4 months ago)
Very Helpful Tutorial 👍
David Lamptey (4 months ago)
wow. Thanks alot
nether winds (5 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 (5 months ago)
Absolutely nice
Sandeep Kumar (5 months ago)
Really good video!
Som Bismaya (5 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 (5 months ago)
awesome awesome awesome
Abdullahi Hassan (5 months ago)
Thanks for the clarity
gentooforyou (5 months ago)
I found this tutorial very useful :-)
John Green (5 months ago)
Superb, thank you.
Lei Sheng (5 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 (5 months ago)
Ur voice is killing my years
Gaurav phalke (5 months ago)
good work keep it up
adkinsy85 (5 months ago)
Thank you so much 😀
Mishra S Suman (6 months ago)
hey can you teach how to remove a sidebar
Prez Golez (6 months ago)
listen on 1.25 speed
paul badulescu (6 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 (6 months ago)
Hello there. Do we have responsive design tool in google chrome like in firefox?
Lalsingh Nayak (6 months ago)
Sooooooooper sir, I really loved it, simple way of teaching
Cooper Geyer (6 months ago)
are u english, south african, australian or just posh indian?
natwat123 (6 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 (6 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 (6 months ago)
great video
Jazib Mushtaq (6 months ago)
Man Dam awasome its very helpful tutorial thanks a lot you way of expressing the tag and sharing the information is so simple that every person can understand easily
Jerald George (7 months ago)
good one broo.. thanks
pranav pathak (7 months ago)
Excellent
Shravan Reddy (7 months ago)
What do u suggest is the best way to learn programming for fine arts / design professional?
Alamgir Hosain (7 months ago)
Thanks a lot to Quentin Watt...
Jonathan Torres (7 months ago)
Amazing tutorial. Easy to follow. And i was finally able to wrap my head over media queries
Søren (7 months ago)
this was extremely helpful! Thank you!
Ron Hernandez (7 months ago)
Quentin, contact me so we can talk. I have a job for you and want to learn more from you.Feel free to email me [email protected]
alabay112 (7 months ago)
Great tutorial!
Syed Mohd Talha (7 months ago)
Amazing..the way u explain everything!!
tanjoh klaus (7 months ago)
This is great! I'm sure it's really gonna help me.
Dembert Gastardo (8 months ago)
Thank you very much for this video.
Tegar Adi Cahya Saputra (8 months ago)
/* Nice Tutorial */ 5 star rate for you
Anime Parlor (8 months ago)
you have save me with this video Thanks very much
Anime Parlor (8 months ago)
This tutorials still works after 4yrs
priyanth mohan (8 months ago)
Superb video
stephen komu (8 months ago)
great tutorial.
Shubham sharma (8 months ago)
👌👍
vishal sharma (8 months ago)
Great job man................
Cheikh Sidi (8 months ago)
sooo good :)
Marvin Gorospe (8 months ago)
Just wanted to ask what web tool you are using for testing and resizing the webpage in firefox? Do they have one for Chrome if you know? Thanks.
siva k (8 months ago)
nice bro
Sarah (8 months ago)
Great tutorial, thanks a lot. Liked and subbed. ♥

Would you like to comment?

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