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

Posted by Max Reinsch
Max Reinsch
5,740 Points

Media 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. =)

Nick Pettit Guil Hernandez

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Max Reinsch,

Usually, you wouldn't need to define a max-height — let the content dictate your height. The max-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. :)

2 Answers

Serge Honderdos
Serge Honderdos
8,918 Points
Serge Honderdos
Serge Honderdos
8,918 Points

Hi,

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
Max Reinsch
5,740 Points
Max Reinsch
Max Reinsch
5,740 Points

Thanks Serge Honderdos and Guil Hernandez . I'm going through the videos and blog post now.