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

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.