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 Stanley Abraham
Stanley Abraham
3,260 Points

Columns won't float. I don't know what I'm doing wrong. Please help!

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

 /************************************
           TWO COLUMN LAYOUT
 ************************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
    }
  }
@media screen and (min-width: 660px) {

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Stanley Abraham | Designer |</title>
    <link rel="stylesheet" href="css/._normalize.css">
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="css/main.css"> 
    ="stylesheet" href="css/responsive.css"> 
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Stanley Abraham</h1>
        <h2>Designer</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> If you need help with any projects,I am availible for work. If you have any questions, please don't hesitate to contact me!</p>
        <p>Please only use phone contact for emergency inquiries. I can be best reach via email or tweeter.</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
          <ul class="contact-info">
            <li class="phone"> <a href="tel:857-654-4134">857-654-4134</a></li>
            <li class="mail"> <a href="mailto:Stan773@gmail.com"> Stan773@gmail.com</a></li>
            <li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=standaman777"> @StanDaMan777</a></li>
          </ul>
      </section>
      <footer>
        <a href="https://www.facebook.com/stanley.abraham.560"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="http://instagram.com/standaman777"><img src="img/instagram-logo.png" alt="Instagram Logo" class="social-icon"></a>
        <a href="https://twitter.com/StanDaMan777"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <p> Socail media links</p>
        <p>&copy; 2014 Stanley Abraham</p>
      </footer>
    </div>  
  </body>  
</html>

Edit: Fixed the code for you to show the code more clearly. Do have a look at the Markdown Cheatsheet to learn how to share code in the forums. Easy when you know how. :-)

Philip G
Philip G
14,600 Points

I found no problems in your code. Can you please give us a link to your host? e.G. The Workspaces Preview Otherwise we can't help you properly. Thanks!

4 Answers

Matthew Greenberg
Matthew Greenberg
8,173 Points

Your stylesheet is not linked correctly to the html document. 

="stylesheet" href="css/responsive.css">  // this is what you have

<link rel="stylesheet" href="css/responsive.css">  //this is what you need
Philip G
Philip G
14,600 Points

Yeah, I too think this was the mistake.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Stanley, the code looks fine to me from the forum post. I wonder how it is you're verifying the media queries are working. Are you using the browser to drag it to it's minimum width? As far as I remember it only goes to as thin as 480px so it might not be picking up the changes for you.

Try a great tool called www.quirktools.com/screenfly to check out your media queries without messing around with your browser width. :-)

David Omar
David Omar
5,676 Points
David Omar
David Omar
5,676 Points

Firefox has a nice responsive design view you can also use

Stanley Abraham
Stanley Abraham
3,260 Points
Stanley Abraham
Stanley Abraham
3,260 Points

Thank you for finding the error in my code. I still have a problem. My my icon for my social media links are footed to the left.

Stanley Abraham
Stanley Abraham
3,260 Points
Stanley Abraham
Stanley Abraham
3,260 Points

Here is a link of how my website looks.... http://port-80-hvtgzcti4d.treehouse-app.com/contact.html