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:
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.