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 Adaptive Layouts with Media Queries

Calculating the long % values??

I've tried going through previous questions but still don't understand this video.

This is the code

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding-top: 25px;
    background: #ECF0F1;
    color: #FFF;
    font: 1.3em/1.6 sans-serif;
}
.wrap {
    margin: auto;
    width: 90%;
}
.main-header {
    background: #34495E;
    text-align: center;
}
.logo, 
.main-nav a {
    display: inline-block;
    color: #FFF;
    text-decoration: none;
}
.main-nav a {
    padding: 0 .75em;
    border-right: 1px dotted;
    color: rgba(255,255,255, .8);
    font-size: .7em;
    line-height: 1rem;
}
.main-nav a:hover {
    text-decoration: underline;
}
.main-nav a:last-child {
    border-right: none;
}
.content, 
.main-header {
    overflow: hidden;
}
.col {
    height: 240px;
}
.main {
    background: #3498DB;
}
.secondary {
    background: #2ECC71;
}
.extra {
    background: #E74C3C;
    display: none;
}
.main-footer {
    background: #95A5A6;
}
.main-header, 
.main-footer, 
.col {
    margin-bottom: 15px;
    padding: 2.15%;
    border-radius: 5px;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */


/* Phone to Tablets */
@media screen and (min-width: 481px)  {
    .col {
        float:left;
    }
    .main {
        width: 65.957446808511%;
    }
    .secondary {
        width: 31.914893617021%;
        margin-left: 2.127659574468%;
    }
}

In previous answers people have been saying 66% of 980px. But where is 980px stated is this just the default of webpages on computers?

And 66% of 980 = 646.8 and you need to obviously have the px value first if you want to get the % value.

So my two questions are where does the 980px value come from that people are talking about?

And where does the px value for the .main, .secondary and the margin-left come from?

2 Answers

Andres Aguero
Andres Aguero
30,545 Points

Hello David,

You may have gotten mixed up a bit.

.main {
    width: 65.957446808511%;
}
.secondary {
    width: 31.914893617021%;
    margin-left: 2.127659574468%;
}

This piece of code simply makes it so that everything on the page is full-width. 65.957446808511% PLUS 31.914893617021% AND 2.127659574468% all EQUALS to 100%.

I have no clue where they got the percentages from, but you could easily change values to main 66%, secondary 32% and the margin-left to 2%.

Thanks man, it just really irritated me not knowing how they get the numbers but you are right. I should've have just accepted that it added up to 100%!