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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Oliver Linde
Oliver Linde
2,775 Points
Posted by Oliver Linde
Oliver Linde
2,775 Points

Not getting the 3 columns in the gallery and images for the contact details stay with the contact details when it expand

Not getting the 3 columns in the gallery and images for the contact details stay with the contact details when it expands to breakpoint. Cant find whats wrong in my code, please help!

This is my responsive.css code:

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

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

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


  /***************************************
PAGE: PORTFOLIO
****************************************/

#gallery li {
    width: 28,3333%;
  }

  #gallery li:nth-child(4n) {
    clear: left;
  }


}  

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

}

This is my contact code: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <title>Oliver Linde | Designer</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,700italic,400italic,800' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Oliver Linde</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 Information</h3>
        <p>I am currently looking for new design work and similar engagements. If you have any questions, please don't hesitate to contact me.</p>
        <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
      </section>
      <section id"=secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:+4676-2136464">+4676-2136464</a></li>
          <li class="mail"><a href="mailto:oliverlinde@icloud.com">oliverlinde@icloud.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=dasichlinde">@dasichlinde</a></li>
        </ul>
      </section>

      <footer>
      <a href="https://www.twitter.com/dasichlinde"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="https://www.facebook.com/OliverLiinde"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Oliver Linde</p>
      </footer>
   </div>
  </body>
</html>

Thank you for helpling me & have a good day!

2 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Oliver,

I see two typos in you code.

The first on is in the CSS. In your #gallery li, you have a comma instead of a period in 28.3333%

Second is in your HTML. For your section ID of secondary, you have the equal sign and quotation mark backwards.

Fix those and it should work.

Keep Coding! :)