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

Why won´t my responsive code work correctly?

Hey, my General information column and my Contact Details won´t work as they should. Does anyone know why?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Felix Johansson Web Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' 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>Felix Johansson</h1>
      <h2>Web 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, don't hesitate to contact me if you need help with your website or have questions about my design.</p>
        <p>Send me a mail or contact me on <a href="https://www.linkedin.com/profile/view?id=376735337&trk=nav_responsive_tab_profile">LinkedIn</a> if you are instested in my help.</p>
      </section>

      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
        <li class="linkedin"><a href="https://www.linkedin.com/profile/view?id=376735337&trk=nav_responsive_tab_profile">LinkedIn</a></li>
        <li class="mail"> <a href="mailto:felix.difjohansson@hotmail.com">felix.difjohansson@hotmail.com</a></li>
        </ul>
      </section>
      <footer>
        <a href="https://www.linkedin.com/profile/view?id=376735337&trk=nav_responsive_tab_profile_pic"><img src="img/linkedin.png" alt="LinkedIn Logo" class="social-icon"></a>
        <a href="http://facebook.com/felix.d.johansson"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Felix Johansson.</p>
      </footer>
    </div>
  </body>
</html>

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

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

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

  #secondary {
    width: 40%;
    float: right;
  }

} 

I can't see your code well. Click enter after the backtics + html/css you have written and again enter before typing the last backticks.

3 Answers

John Donnell
John Donnell
7,801 Points

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

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

primaty { width: 50%; float: left; }

secondary { width: 40%; float: right; }

}

I see your id #primary is spelled wrong you have #primaty

Thanks!

Gerard Weppler
Gerard Weppler
4,357 Points

Did you add your closing tags after your footer and div?

      </footer>
   </div>
</body>

</html>

could you please share all code.

Gerard Weppler
Gerard Weppler
4,357 Points

also make sure to check that you spelled correctly your

<li><a href="index.html class="selected>Portfolio</a></li>

if you put an uppercase in "Index" on your about page and in your index page you have it listed as "index" it will not work.

same for your contact page.