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!
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

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. :)