MEDIA QUERIES: Comma Separated List

[byte6953803474]

@media only screen and (min-width: 320px) and (max-width: 480px), (orientation: portrait) {
.gallery-item .thumbnail {
width: 95%;
}
}

In this lesson https://www.codecademy.com/courses/learn-intermediate-css/lessons/media-queries/exercises/comma-separated-list), where we have the code above, how will this work?

Because it says in the And operator lesson (https://www.codecademy.com/courses/learn-intermediate-css/lessons/media-queries/exercises/and-operator) that both media features must be true before the css rules can be render

[nab-sa]

Hey @byte6953803474

Because only screen is considered a media feature the same as (min-width: 320px), (max-width: 480px) and (orientation: portrait), so by adding and you’re making it sure that you’re targeting a screen at the width you want your CSS to be applied.

I hope this helps

[mtrtmk]

@media only screen and (min-width: 320px) and (max-width: 480px), (orientation: portrait) {
  .gallery-item .thumbnail {
    width: 95%;
  }
}

The above query can be thought of as:

(screen width is at least 320px AND screen width is not more than 480px) OR (orientation is portrait)

In other words,

(screen width is in the range 320-480px) OR (orientation is portrait)

---

If you still have some doubt:

• Go to this page: W3Schools Tryit Editor

• Delete the media query in the above page and replace it with:

@media only screen and (min-width:320px) and (max-width:360px), (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

• Click the Run button

• Drag the divider (between editor and browser) to resize the screen. You will see that (when width is in the range 320-360px) OR (when width becomes greater than height [i.e. landscape]), then the background color changes to blue. When both rules are false, the normal background color is seen.