From the course: Advanced CSS Media Queries

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Testing for screen orientation

Testing for screen orientation - CSS Tutorial

From the course: Advanced CSS Media Queries

Start my 1-month free trial

Testing for screen orientation

“

- [Illustrator] You probably know that your phone and your tablet screens can be rotated into portrait mode or a vertical rectangle or into landscape mode, which is a horizontal rectangle. You can also test for this orientation with a media query and make changes to your screen accordingly. However, there's one confusing aspect to this, portrait and landscape don't refer to the orientation of your device. Instead think of these as relative terms. If the browser window is wider than it is tall, it corresponds to landscape mode. If the browser window is taller than it is wide, then it's considered in portrait mode. That means that portrait and landscape media queries work on mobile devices, but they also work on desktop computers. Let's see that in action. So inside of your code pen, for this particular example, I'm going to scroll on down here to the bottom and go ahead and add some new media queries. So let's just say I'm…

Contents