Code Editor
Click here to navigate the course.
Drag the edges to resize the window.
In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!
If only one of multiple media features in a media query must be met, media features can be separated in a comma separated list.
For example, if we needed to apply a style when only one of the below is true:
We could write:
@media only screen and (min-width: 480px), (orientation: landscape) {
/* CSS ruleset */
}
In the example above, we used a comma (,) to separate multiple rules. The example above requires only one of the media features to be true for its CSS to apply.
Note that the second media feature is orientation. The orientation media feature detects if the page has more width than height. If a page is wider, it's considered landscape, and if a page is taller, it's considered portrait.