Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Responsive Layouts Media Queries Media Query Review

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

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*/
}