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