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 CSS Layout Basics Getting Started with CSS Layout Using a Mobile First Approach

SeHyun Choi
SeHyun Choi
3,441 Points
Posted by SeHyun Choi
SeHyun Choi
3,441 Points

What are some good media query breaking points?

What are some good media query breaking points?

3 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

The ones built into the popular Bootstrap framework are probably a good baseline:

  • less than 768px wide for phones
  • equal to or greater than 768px wide for tablets
  • equal to or greater than 992px wide for small laptops
  • equal to or greater than 1200px wide for laptops and desktops
Robert O'Toole
Robert O'Toole
6,366 Points
Robert O'Toole
Robert O'Toole
6,366 Points

if its mobile first tho wouldnt it be anything greater than 480px? is it best to start with (max-width:768px) or (min-width:480px)... im finding a lot of debates online wanted to know what u think

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Generally, breakpoints are not set at the exact size of a device, but at a value somewhere in between devices of different types. This prevents your design from needing revision just because the new version of a device is just slightly larger in size.