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

Derick Brown
Derick Brown
7,361 Points
Posted by Derick Brown
Derick Brown
7,361 Points

Why multiple media queries?

I'm actually pretty good with CSS, HTML, and overall web design but there's a few little kinks I want to iron out for my understanding, such as multiple media queries.

In this video, he uses both:

  • (min-width: 768px)
  • (min-width: 700px) and (orientation: landscape)

Since both media queries has the same styles being applied, does the "min-width: 768px" even matter?

The second media query has a min-width of 700px so that would accommodate for 768px. Even though the orientation is landscape, any device bigger than 700px (landscape or portrait) will still inherit these styles wouldn't they?

That's why I'm thinking if you just had "min-width: 700px", then those styles would apply to a device that's portrait, landscape, and 700px+ (accommodating for 768px).

Can someone help me get a better understanding of this?

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

he's being particular. Unless he thinks that the different between 700 and 768 while portrait matters, it's completely pointless (if as you say, the styles are the same).

Derick Brown
Derick Brown
7,361 Points
Derick Brown
Derick Brown
7,361 Points

Oh okay. So I wasn't losing my mind lol.

But would we ever use Orientation?

I would think as long as we establish a min-width, anything above that (portrait or landscape) until the next breaking point would be the same regardless of orientation.

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

Actually, the more i think about it, the more i agree with you. I'm not super sure what you gain, unless you add modifications to deal with the reduced vertical height. A reduced vertical size would mess with large images or a fixed header. It may have just been demonstrating target landscape mode on a phone.

1 Answer

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

:point_right: These media queries overlap a bit, but together they establish a unique functionality.

So even if the styles in the two queries are identical, they will only be applied to devices in landscape mode of 700px or more, and to any device with a width of 768px or more.

They will NOT be applied to devices in portrait mode that are between 700 and 767 pixels wide.

Derick Brown
Derick Brown
7,361 Points
Derick Brown
Derick Brown
7,361 Points

Thanks for the clarification! I totally understand what you're saying.

But the part I'm confused about is if the layout didn't look good on a device at 700px landscape, then wouldn't it not look good on a device at 700px portrait? Since both screen sizes are 700px.

That's where I'm confused haha. Why make it look good for one orientation and not the other even though they're both are at the same screen size? Wouldn't you want both to look the same regardless of orientation? That's why I'm wondering if orientation matters much.

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

unless there's something particular about mobile phones, or unless the styles specifically deal with vertical space, there's a tendency to be confused between the difference between 700px and 700px.

Derick Brown
Derick Brown
7,361 Points
Derick Brown
Derick Brown
7,361 Points

Maybe that's why he did "orientation: landscape". So he can accommodate for the vertical height of the entire page so you don't have to scroll as much as you would on portrait. Is that what you're saying Simon?

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

differentiating between the two requires either a difference in terms of the screen (the obvious one being vertical height in landscape) or something different in terms of how you consume the 700px (either in terms of being closer to the screen having some impact or the different input mechanism). However, given that they specifically said phones are great for scrolling, it seems counterintuitive to go to a layout that reduces scrolling earlier in a phone. While i can see cases for difference in behaviour, HERE i'm uncertain about a precise style being able to be related to some difference between the two screen sizes (700px on the phone and 760 on the desktop). With that last comment, i wasn't proposing an answer so much as elaborating on the question in hope Steven Parker might have some specific insight.