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

Sharina V. Jones
Sharina V. Jones
11,459 Points
Posted by Sharina V. Jones
Sharina V. Jones
11,459 Points

Column no go

I'm trying to follow along in the video, however, when I add the code to get the main and secondary columns to float next to each other, they don't. The column widths adjust but they remain stacked on top of each other. Please halp!

<!DOCTYPE html>
<html>
<head>
    <title>Media Queries</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <header class="main-header">
            <a class="logo" href="#">Logo</a>
            <nav class="main-nav">
                <a link href="#">Link 1</a>
                <a link href="#">Link 2</a>
                <a link href="#">Link 3</a>
                <a link href="#">Link 4</a>
                <a link 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>

* {
    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 screen and (min-width: 481px) {
  .col {
    float: left;
  }
  .main {
        width: 65.957446808511%;
    }
    .secondary {
        width: 31.914893617021%; 
    }

}

3 Answers

Jacques Vincilione
Jacques Vincilione
17,292 Points
Jacques Vincilione
Jacques Vincilione
17,292 Points

I don't see any issue... http://jsfiddle.net/jvincilione/UenB8/

Make sure your browser window is larger than 481px.

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

It never displays two columns correctly or three columns ever for me. Even when I use the final code in the final folder. It just creates two rectangles that eventually move beside each other, or three rectangles with two beside each other and the third underneath.

jeremywhiteford3
jeremywhiteford3
13,297 Points
jeremywhiteford3
jeremywhiteford3
13,297 Points

IE8 and below don't support media queries. That browser is too old (unless you use javascripts)

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

Do you know if they're supported on Firefox 25 and below? They must be at least partially. The break points work but the implementation is off.

jeremywhiteford3
jeremywhiteford3
13,297 Points

Yes ff 25 supports media queries. Check out caniuse.com/css-mediaqueries

I can't check your css or markup until possibly tomorrow. I am looking at this on my phone currently and won't be around home for a while.

Jacques Vincilione
Jacques Vincilione
17,292 Points
Jacques Vincilione
Jacques Vincilione
17,292 Points

I completely forgot about the media query issue in IE8... and I've explained it to my boss a hundred times about why printing doesn't doesn't look right.

jeremywhiteford3
jeremywhiteford3
13,297 Points

I feel your pain! We have written a program that's dynamically generates reports and they get printed out. Print support is horrible across all browsers and forget about them being standardized. It's often better to convert into a pdf and then print that.

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

Maybe my browser's too old? I'm at work so I'm using Firefox 25. The only other browser I have here is IE 8.

Jacques Vincilione
Jacques Vincilione
17,292 Points
Jacques Vincilione
Jacques Vincilione
17,292 Points

I'm pretty sure float works in IE8, try setting a width of 100% (or any value that will let you test) and it may fix the issue for you.

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

I'm not sure what you mean? Try setting the width of one of the columns to 100%?