Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Responsive Layouts Media Queries Media Query Review

Posted by Igor Fastovski
Igor Fastovski
1,353 Points

How do you test for Orientation on a desktop?

When using "orientation" in media queries, can you actually test your work on a desktop?

2 Answers

highlandcow
highlandcow
7,352 Points
highlandcow
highlandcow
7,352 Points

The Chrome browser's built-in developer tools can emulate orientation.

https://developer.chrome.com/devtools/docs/device-mode

Hit CTRL+SHIFT+I to enable devtools. You'll see a little phone icon between the spyglass and elements. You can click the rotate icon beneath the device select tree to rotate the device.

Igor Fastovski
Igor Fastovski
1,353 Points
Igor Fastovski
Igor Fastovski
1,353 Points

Thanks for your answer highlandcow. It does work. However I now understand that orientation is a very simple property defined only by height and width of the viewport. If width > height, the orientation is "landscape". If width < height, the orientation is "portrait". Hence it's easy to emulate orientation in the browser even without devtools, just by playing with window size. Devtools only allow to set the screen to established widths and heights to emulate particular devices.

Graeme Oxley
Graeme Oxley
8,931 Points
Graeme Oxley
Graeme Oxley
8,931 Points

@Igor, while you are definitely correct that orientation is nothing more than the browser's height and width display and you definitely CAN just adjust your browser size to see what it looks like at different widths, I would still recommend using the google or firefox dev tools because the obvious question is: Do you really want to re-size your browser thousands of times when a better method exists already?

Also, if you are working smarter and not harder, you will be doing most of your adjustments and testing in the dev tools anyways, so it wouldn't make sense to close out of it just to re-size your browser.

Lastly, the dev tools have the popular device sizes built in; re-sizing the browser would require you to either not care what the other device sizes are or to keep a spreadsheet handy to do things the old fashioned way.

edit Also it is incorrect that the dev tool ONLY lets you set the size to preset device sizes. You can set the size to anything you want, but the presets are there for your convenience.