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

Posted by Eugene Letkin
Eugene Letkin
11,737 Points

Why don't we just set the min-width to one value - 700px?

I really like this lesson, but I don't understand why Nick created two media queries- min-width: 769px at any orentation, but if the orentation is landscape min-width:700px; why don't we just combine both these rules and set the min-width: 700px at any orentation. Thank you so much! Hope you get my thought.

1 Answer

Jordan Watson
Jordan Watson
14,738 Points
Jordan Watson
Jordan Watson
14,738 Points

The reason there is two is because it is a layout preference for the point of teaching the "and" operator is used to make sure the min-width is set 700px and the orientation is landscape therefor sets a better layout for the specific device. It is entirely down to the given design.

It may look like they both can achieve the same thing but in essence they perform different logic if you can call it that.

So essentially its an case of saying:-

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

or

only screen and (min-width: 700px) and (orientation: landscape){
  /*CSS HERE*/
}