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 Basics (2014) Enhancing the Design With CSS Adjusting the Layout with Media Queries

Cindy Bischof
Cindy Bischof
3,935 Points
Posted by Cindy Bischof
Cindy Bischof
3,935 Points

Recommended pixel widths for resizing content?

Why were viewports of 1024px and 768px or less selected as points to resize content in this video? Those seem like very specific numbers, so I was wondering if there was a reason why these were selected. Are there recommended viewport widths that are ideal points for resizing content across devices?

1 Answer

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
Cindy Bischof
Cindy Bischof
3,935 Points
Cindy Bischof
Cindy Bischof
3,935 Points

Great explanation! Thank you!