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 Unused CSS Stages Media Queries Media Features and Media Types

Bob Sutherton
Bob Sutherton
20,160 Points

are there stock breakpoints that you use?

I have seen Nick and Guil use different break points. I was wondering if there are go-to breakpoints that you can use reliably every time when building a new website?

5 Answers

James Barnett
James Barnett
39,199 Points

For the love of all the good and holy please don't.

You should allow your content to define your break points.

further reading: http://www.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/

Kirill Lavrishev
Kirill Lavrishev
3,699 Points

It is different for every website you make. I believe the best way is to check your site by changing the browsers width to the point that it starting to break or to look unpleasant and then create an breakpoint - until you get down to 240px.

Kinda-yes. Here is a good post by CSS tricks that has some good places to start targeting.

I say 'kinda-yes' because new devices come out all the time with different resolutions. What may be 'standard' today, might not be standard next year. This is what Responsive Web Design seeks to fix, by targeting all potential device widths instead of setting break points.

use bootstrap's grid.large, medium, small, extra small (lg, md, sm, xs). THese seem to be the best fits

Extra small devices Phones (<768px)

Small devices Tablets (>768px)

Medium devices Desktops (>992px)

Large devices Desktops (>1200px).

http://getbootstrap.com/css/#grid-example-basic

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,932 Points

I think it depends on personal preference more than anything else. Up to a point at least.

I tend to target a huge range of breakpoints but it really depends on your design. I have a media query template which targets a width of 240, 320, 360, 480, 600, 720, 768, , 900 and 1024. But you should realise that no two projects are the same and the only restriction really is the width of the device.