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 media query where you targeted screens with a min-width
of 320px
and a max-width
of 480px
.
Now that you have located this media query, let’s also make the logo and text appear vertical if the screen is in portrait orientation. To do this, add an orientation
media feature after inserting a comma (,
) to separate the rules. This new media feature should check if the screen’s orientation
is portrait
.