CSS Responsive Layouts Media Queries Media Query Review

Jan Livny
Jan Livny
6,705 Points

Media Query confusion

Hello, I have trouble understanding the following media query:

@media only screen and (min-width: 768px), only screen and (min-width: 700px) and (orientation: landscape)

the combination of ", " and "and " statements has me confused, can someone please explain : do all of the statements have to be true, or only one of them. Please Help.

2 Answers

Jacob Jackson
seal-mask
.a{fill-rule:evenodd;}techdegree
Jacob Jackson
UX Design Techdegree Student 7,806 Points

Hey Jan!

Great question. I know these can start to get a little cumbersome. Only one has to be true, but the statements you're referring to are separated by the comma.

so there are 2 scenarios here:

  • one where the screen has a min-width of 768px

and

  • one where the screen has a min-width of 700px AND the user's screen is in landscape orientation (the width is larger than the height)

If one of the criteria above applies, then the shared code between these 2 queries will be applied to the styling

Think of it this way:

You know when you make a CSS rule for multiple elements at the same time using a "," like so:

h1,
h2,
h3 {
color: red;
}

We know from looking at this that if the developer uses an h1, an h2, or an h3, that whatever text they use will be red, but they don't have to use all 3.

I hope this helps simplify the logic a little bit for you. Let me know if you have any follow up confusion from my answer.

Keep it up and best of luck!

-Jake

Jan Livny
Jan Livny
6,705 Points

Thank you so much!

Mark Wilkowske
MOD
Mark Wilkowske
Treehouse Moderator 17,494 Points

Hello Jan, it might help to put each query on a new line after each comma:

@media only screen and (min-width: 768px), 
only screen and (min-width: 700px) and (orientation: landscape){}

Two things from the MDN documentation: 1. let the comma here represent OR - if either query is true then apply these rules.

and 2. 'and' is conditional so in the second query, both conditions must be true.

Sometimes it helps me to look inversely at things so: a screen width less than 700px is a false condition. And a portrait orientation is a false condition, so we don't need CSS in those cases.

Hope this helps.

Jan Livny
Jan Livny
6,705 Points

Thank you very much!