Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Responsive Layouts Media Queries Media Query Review

Jan Livny
Jan Livny
6,705 Points
Posted by 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,833 Points
Jacob Jackson
.a{fill-rule:evenodd;}techdegree
Jacob Jackson
UX Design Techdegree Student 7,833 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
Jan Livny
Jan Livny
6,705 Points

Thank you so much!

Mark Wilkowske
PLUS
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 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
Jan Livny
Jan Livny
6,705 Points

Thank you very much!