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:
- The screen is more than 480 pixels wide
- The screen is in landscape mode
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
.
Instructions
Navigate to the first media query where you targeted screens with a min-width
of 320px
and a max-width
of 480px
.
Let’s also make the logo and text appear vertical if the screen is in a portrait orientation.
Add another media feature to the rule, using a comma (,
) to separate rules. The second media feature should check if the screen’s orientation
is portrait
.