Responsive Web Design: A Visual Guide

Awesome Tut!!!!!!!!! Thank you!

good resource .. thank you for your effort

I’m getting some odd results with my tests. I’m using a dual monitor setup and while testing the media queries on the “main” monitor,everything works just fine width scaling the browser window etc. But when I move the browser to the secondary monitor, I’m getting orientation landscape back and the design switches to the “tablet mode”.

Windows 7 64

Chrome:
Gets orientation on secondary monitor

FF5:
Gets orientation on secondary monitor

Opera 11.5:
Gets orientation on All monitors

IE9:
Works as expected

Sample Code:
/* CSS Document */

* { margin:0px; padding:0px; }

#pc { background:red; }

@media (max-width:1280px) {
#pc { background:white; }
#pc2 { background:red; }
}

@media (max-device-width:1280px) and (orientation: landscape) {
#pc { background:white; }
#tablet_andr_ls { background:red; }
}

@media (max-device-width:1024px) and (orientation: landscape) {
#pc { background:white; }
#tablet_ipad_ls { background:red; }
}

@media (max-device-width:800px) and (orientation: portrait) {
#pc { background:white; }
#tablet_andr_pt { background:red; }
}

@media (max-device-width:768px) and (orientation: portrait) {
#pc { background:white; }
#tablet_ipad_pt { background:red; }
}

Great tutorial and very informative. Thank you.

On a completely unrelated note, what colour scheme for Coda are you using?

Great video! I think some industries are falling behind on the mobile side of web design. By 2014 there are going to be more mobile internet users than personal computers in homes.

Great web design tutorial. This will come in handy working with my new clients in utah.

Thanks for your hard work.

Great Tutorial! Thanks for your nice work.

What a brilliant tut this is! interesting and informative. Loved the fast forward rather than the copy paste seen in other examples.

I’m still quite new to this site and this is the first tut that i have watched by Andrew Gormley, and i have to say this i’m looking forward to seeing many more!

Excellent work and thank you!

Awesome Tutorial!!!!!!!!! Thank you! :) :)

Great tutorial. Thank you.

This doesn’t work when we use IE9 browser and below. We need to use javascript :

1)html5.js
2)css3-mediaqueries.js

I have a doub’t, if I use this code from a local folder it doesn’t work but if I upload on the server it works fine !

Great Job on the video! I rarely comment on things — but this was extremely helpful!

trying to get this example to work on IE8, not having any luck with it, there is no change as you reduce the screen size so media queries are not working for me on my local pc anyway, using Windows XP, IE8

Al