Learn
Media Queries
Comma Separated List

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

1.

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.

Folder Icon

Sign up to start coding

Already have an account?