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 Media Features and Media Types

Bob Sutherton
Bob Sutherton
20,160 Points
Posted by 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
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
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.

Riley Hilliard
PLUS
Riley Hilliard
Courses Plus Student 17,771 Points
Riley Hilliard
Riley Hilliard
Courses Plus Student 17,771 Points

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.

Saurabh Datta
Saurabh Datta
1,042 Points
Saurabh Datta
Saurabh Datta
1,042 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 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 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.