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 - Beyond the Basics Working with Media Queries Adaptive Layouts: Wide Viewports

Posted by Max Reinsch
Max Reinsch
5,740 Points

980px

Why 980px specifically?

I think I understand why you have given the wrap an absolute width beyond a certain point, but how and why 980px?

Apologies for the tediously amateur questions; I just want to get my head around all of it.

Thank you.

3 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

I think Guil has used 980px as an example width as it is slightly smaller then the max-width he has set in the media query, this allows for space for a margin on each side of .wrap so that is more visually appealing and easier to see the automatic margining on resize.

I do not think there is a specific reason beyond that but I may be wrong.

Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

I believe the short answer is, as the modern monitors MOSTLY support a 1024 width, this allows for adequate spacing of elements within a page.

A cursory google search has resulted in a lot of people using a width a little less than 980, actually. 960px seems to interest people more, as it is divisable by 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480, which makes for sizable and easy-to-figure-out column layouts.

Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

As I think more about it, a 980 width would support two 480 coloumns (a total of 960px) with a 20px margin between them, or three 320px coloumns, with 10px of spacing between them.

Max Reinsch
Max Reinsch
5,740 Points
Max Reinsch
Max Reinsch
5,740 Points

Cheers guys. So in short, just an example and not important to dwell on. Whatever works best depending on the example etc.

Garrett Levine
Garrett Levine
20,305 Points
Garrett Levine
Garrett Levine
20,305 Points

Well, it works best for a reason, but the reason is more that people have found it has worked best based on designing sites. It isn't that width for any other reason than most monitors are at LEAST 1024px in width.

At least I am pretty sure this is true.