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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Posted by Zapp You
Zapp You
3,548 Points

Im about halfway through the lesson and I cannot get the #primary and #secondary columns to work.

Ive triple checked the code and I dont know what the problem is.

Fabion Stephens
Fabion Stephens
Courses Plus Student 5,893 Points

Can you please post the code you have currently?

Zapp You
Zapp You
3,548 Points

I actually bumped into the strangest thing with this exercise. This is the css that is supposed to make the responsive columns. Its straight forward but not working. However, heres the code: 

@media screen and (min-width:480px){
   //2 colum layout

   #primary { width:50%; float:left;  } 
   #secondary { width:40%; float:right; } 

}
@media screen and (min-width:660px){


}
Zapp You
Zapp You
3,548 Points

And heres the page thats supposed to have two columns. It does have two columns, but they are not side-by-side. One starts way below the other as if they are block elements. 

<!DOCTYPE html>
<html>
    <head>
        <title>Zapp You | Pro Wannabe</title>
        <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
        <link href='main.css' rel='stylesheet' type='text/css'>
        <link rel='stylesheet' type='text/css' href='responsive.css'>

        <meta charset="utf-8">
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Zapp You</h1>
                <h2>Professional Wannabe</h2>            

            </a>

            <nav>
                <ul>
                    <li><a href="index.html" >Portfolio</a></li>
                    <li><a href="about.html" >About</a></li>
                    <li><a href="contact.html" class="selected">Contact</a></li>                    
                </ul>

            </nav>
        </header>
        <div id="wrapper">


            <section id='primary'>
                <h3>General Info</h3>
                <p>The best way to get in touch with me.</p>
                <p>Text | Email | Phone.</p>

            </section>

            <section id='secondary'>
                <h3>Contact Details</h3>
                <ul class="contact-info">
                    <li class='twitter'><a href="tel:390-333-4498">Tweet</a></li>
                    <li class='phone'><a href="tel:390-333-4498">Tel: 390-333-4498</a></li>
                    <li class='mail'><a href="mailto:user@me.net">Email: user@me.net</a></li>
                </ul>

            </section>
            <footer>


                <a href="http://en.wikipedia.org/wiki/Mario" target="_blank"><img class='social' width="70" height="70" src="image/mario.jpg" /></a>
                <a href="http://en.wikipedia.org/wiki/The_Legend_of_Zelda" target="_blank"><img class='social' width="80" height="80" src="image/zelda.jpg" /></a>

                <p>Copyright &copy;</p>

            </footer>
        </div>
    </body>
</html>
Zapp You
Zapp You
3,548 Points

Please tell me if you get the same thing. Just wanna know im not crazy.

Zapp You
Zapp You
3,548 Points

Thats the answer. It was the single line comment. What a nuance. Thanks so much!

1 Answer

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Do you have your css files in the main folder with your html files? Nick has it set up where the css files are in a css folder.

I would first make sure you are properly linking to responsive.css

Also, I don't know why you have the windows-1252 charset.

One thing you can do is to add at the top of responsive.css, before the 480px media query:

body {
  background: orange;
}

If you don't see that then you might not have responsive.css linked properly.

Zapp You
Zapp You
3,548 Points

I fixed it by flipping the order of the #primary and #secondary around. Now it looks like this:

@media screen and (min-width:480px){ //2 colum layout

#secondary { width:40%; float:right; } #primary { width:50%; float:left; }

}

I dont know why this worked. Thanks for the reply.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I didn't catch it the 1st time but you have the wrong style comment in your css.

//2 colum layout

A css comment is like this:

/* css comment */

This will cause the first rule to be ignored but the 2nd one will work. That's why it appears to be working when you reverse them. #secondary is ignored but #primary works. It's not completely working though.

Zapp You
Zapp You
3,548 Points

How can I mark that as the best answer?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Do you see a "Best Answer" link with a checkmark under the answer?

Zapp You
Zapp You
3,548 Points

Only one comment has the "best answer" button below it, and its not the one with the best answer. I think the best answer is the one about the // discrepancy that Jason noticed.

I think every comment should have that "best answer" button. Any comment could be the answer, so why not have it there?