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.

Max Reinsch
5,740 PointsMedia Queries. Please help!
I want to know which screen resolutions I need to pick for the Media Queries for a Website I'm making.
I cannot find an understandable logical walkthrough for this process.
So, which Max-widths do I include? Do I need to include Max-heights/and for what reasons?
Thank you, this has been giving me a headache. =)
2 Answers

Serge Honderdos
8,918 PointsHi,
To begin with Media Query's a nice practice is to make three different views:
- Mobile (max-width 320px)
- Tablet (max-width 768px)
- Desktop (no Media Query needed)
Although this isn't best practice because now you have to change or add Media Query's for every new device with a slightly different dimension. Responsive is also about being future proof. And because we don't know what kind of weird screen dimensions Samsung is releasing next week we need to anticipate to that. So start with a big (or small) screen width and start narrowing your browser. When things start to fall apart/look weird add a Media Query and add some styles. This way your website will look nice on every device.
Take a look at this very nice blog post from Brad Frost: http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

Max Reinsch
5,740 PointsThanks Serge Honderdos and Guil Hernandez . I'm going through the videos and blog post now.
Guil Hernandez
Treehouse TeacherGuil Hernandez
Treehouse TeacherHi Max Reinsch,
Usually, you wouldn't need to define a
max-height
— let the content dictate your height. Themax-width
really depends on the layout you're trying to build.I noticed you don't have the badges for these two CSS stages. Also, take a look at the Mobile First video from CSS Layout Techniques. These should help you understand which media queries to use for
max-width
.Hope this helps. :)