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 orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

my page is not fluid??

Hello,

Below is the original code from the lecture class http://teamtreehouse.com/library/css-foundations/media-queries/adaptive-layouts-with-media-queries-2

1) If you narrow the viewport, you will see the links collapse, but in the lecture when the instructor narrows his viewport nothing collapses. What is missing in this css to stop the links from collapsing when the viewport is narrowed?

2) When styling the columns, the instructor gives .main{width: 65.957446808511%;} .secondary{width: 31.914893617021%; } .extra, .secondary{margin-left: 2.127659574468%;} What math formula does he use to get all of these decimals?

3) the body's font-size is 1.3em or 20.80px, what is the math formula to convert col's {padding: 2.15%;} into px

<!DOCTYPE html>
<html>
<head>
    <title>Media Queries</title>
    <style>

* {
    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 {
    display: none;
    background: #E74C3C;
}
.main-footer {
    background: #95A5A6;
}
.main-header, 
.main-footer, 
.col {
    margin-bottom: 15px;
    padding: 2.15%;
    border-radius: 5px;
}

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


/* Phones to Tablets */

@media only screen and (min-width: 481px) {
    .col {
        float: left;
    }
    .main {
        width: 65.957446808511%;
    }
    .secondary {
        width: 31.914893617021%; 
    }
    .secondary,
    .extra {
        margin-left: 2.127659574468%;
    }
}

/* Tablets to Desktop */

@media only screen and (min-width: 769px) { 
    .logo {
        float: left;
    }
    .main-nav {
        float: right;
    }
    .main {
        width: 40.425531914894%;
    }
    .extra {
        display: block;
        width: 23.404255319149%;
    }
}

@media only screen and (min-width: 1024px) {    
    .wrap {
        width: 980px;
    }
}

/* @media not screen and (monochrome) {
    body {
        background: red; */




    </style>
</head>
<body>
    <div class="wrap">
        <header class="main-header">
            <a class="logo" href="#">Logo</a>
            <nav class="main-nav">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
                <a href="#">Link 4</a>
                <a href="#">Link 5</a>
            </nav>
        </header>
        <div class="content">
            <div class="main col">
                Main
            </div>
            <div class="secondary col">
                Secondary
            </div>
            <div class="extra col">
                Extra
            </div>
        </div>
        <footer class="main-footer">
            Footer
        </footer>
    </div>
</body>
</html>

2 Answers

Jacob Miranda
Jacob Miranda
19,080 Points
Jacob Miranda
Jacob Miranda
19,080 Points

For your first question, the reason his navigational links do not collapse is because he didn't shrink the window too far. If he did in the video, you would see it jump down. If you don't like how that works for your website then you may have to change the font-size for your links.

What I'm assuming he did for your second question, is go from a static site using pixels for widths to a fluid layout. So from the pixel widths he must have done the math to get his widths pixel perfect according to his design. I believe you just divide the element's pixel width by the width of the container. You keep all the numbers past the decimal because if you drop any for any reason, it may potentially mess with your design.

I also threw the code into codepen so everyone can see it and play around with it without having to turn to the video: http://codepen.io/anon/pen/JFICH

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Jacob,

thank you for number 1; I thought it was just screen. As for #2 and #3, may I please direct answers. I mean may I see the math behind them.

2) When styling the columns, the instructor gives .main{width: 65.957446808511%;} .secondary{width: 31.914893617021%; } .extra, .secondary{margin-left: 2.127659574468%;} What math formula does he use to get all of these decimals?

3) the body's font-size is 1.3em or 20.80px, what is the math formula to convert col's {padding: 2.15%;} into px

thanks!