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 Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

Joseph Wilkinson
Joseph Wilkinson
2,615 Points

In the adaptive layouts and media queries video, how did you calculate the specific widths that you wanted to use?

The widths seem to be very precise and I was unsure how you came to the conclusion of what numbers to use.

2 Answers

Ken Alger
STAFF
Ken Alger
Treehouse Teacher

Joseph;

Generally speaking, you design your media break points based on when the design changes (breaks down) based on browser width. Design your sites using a mobile first design process and it helps solve some of the responsive web issues. By resizing your browser, using some of the various dev tools, or device emulators, you can see where the break points can/should be set.

Hope that helps some.

Paul Sullivan
Paul Sullivan
7,876 Points

There is really no set method to the madness when it comes to setting your media queries. Some people have set intervales they use everytime for specific device widths. Some start with a mobile first approach and size up until things just... don't look right, then nudge things into place at that particular pixel width point. Some will start big and shrink the window and do the exact same thing.

Really just kind of depends on the project and what works best for you! In the case of the lessons shown here on Treehouse, they have simply already gone through the process of finding the "breakpoints" that they felt were best. They seem rather precise, because... well... they are, but it's all just a "gut feeling" on what you consider to be the best point to "break" at.