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

Posted by Joe Li
Joe Li
3,608 Points

Media Queries Question

Hi,

I've tried to get my media queries to work my iPad and iPhone but once I include the iPad media queries it stops my iPhone media queries from working??

Does it matter what order you put the media queries in?

Thanks,

Joe

3 Answers

Mike Croft
Mike Croft
7,463 Points
Mike Croft
Mike Croft
7,463 Points

I had similar issues I put the bigger screen resolution above the smaller ones and it seemed to work. Hope this helps.

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Joe, it depends on how you construct your media queries and your CSS. There are really two ways to do it: build the main part of your CSS for a desktop resolution and at the end put media queries going high to low: 922px to 1024px {} 768px to 922px {} 480px to 768px {} Max-width: 480px

What I do now is build the main CSS for the mobile version, and in the media queries build upward:

Min-width: 480px {}
min-width: 660px {}
Min-width: 800px {}
min-width: 1000px {}
Min-width: 1290px{}
Joe Li
Joe Li
3,608 Points
Joe Li
Joe Li
3,608 Points

Hi,

Mike thank you for your message. John thank you very much, that's really helpful, I understand it a lot more now! Thanks for your time!

Joe