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

Posted by kkswecpsyl
kkswecpsyl
8,155 Points

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
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%.

kkswecpsyl
kkswecpsyl
8,155 Points
kkswecpsyl
kkswecpsyl
8,155 Points

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%!