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 Adjust the Profile Page and Header

Picture is not presented above the text when making the browser very small, it stays to the left.

What did I do wrong? Looked over it but followed all the instructions in the videos.

Did you make sure the code you wrote to float the profile photo is inside the correct media query? Should be inside the media query:

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

3 Answers

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <tile>Jop Wieffer | Web development</tile>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Exo+2:400,400italic,700,700italic,800|Coda:400,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>Jop Wieffer</h1>
        <h2>Web development</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" >Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/jop.jpg" alt="Foto van Jop Wieffer" class= "profile-photo">
        <h3>About</h3>
        <p>Hallo, Ik ben Jop Wieffer. Dit is mijn portfolio, waar ik een aantal van mijn projecten presenteer.</p>
        <p>Ik ben beschikbaar voor kleine projecten op het gebied van (online) marketing. Van plan tot realisatie en van design tot inhoud. Neem contact met me op voor de mogelijkheden</p>
      </section>
      <footer>
        <a href="http://twitter.com/swieffel"><img src="img/twitter-wrap.png" alt= "Twitter Logo" class="social-icon"></a>
        <a href="http://Facebook.com/jop.wieffer"><img src="img/facebook-wrap.png" alt= "Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Jop Wieffer.</p>
      </footer>
    </div>
  </body>
</html>
@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;
}


 /**********************************
  PAGE: ABOUT
  ***********************************/

.profile-photo {
  float:left;
  margin: 0 5% 80px 0;
}

}

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

}

In you css file after the #secondary you are closing the media query. Delete the second } after #secondary and it should be good to go.

Thanks for the quick respones. Still not working though. Now have:

@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;
}


 /**********************************
  PAGE: ABOUT
  ***********************************/

.profile-photo {
  float:left;
  margin: 0 5% 80px 0;
}

}

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

}

had the same problem as you did. I removed the squiggly bracket after #secondary and tabbed everything after page portfolio comment over so it would still be the correct because it is still with the "@media screen and (min-width: 480px) {}" css rule. Saved it and refreshed it, then it worked out like the video showed. Hope i was a help to you.

In you html file there are some whitespaces that are causing some issues as well.

<img src="img/jop.jpg" alt="Foto van Jop Wieffer" class= "profile-photo">

Should read:

<img src="img/jop.jpg" alt="Foto van Jop Wieffer" class="profile-photo">
<a href="http://twitter.com/swieffel"><img src="img/twitter-wrap.png" alt= "Twitter Logo" class="social-icon"></a>
<a href="http://Facebook.com/jop.wieffer"><img src="img/facebook-wrap.png" alt= "Facebook Logo" class="social-icon"></a>

Should read:

<a href="http://twitter.com/swieffel"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://Facebook.com/jop.wieffer"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>

Thanks for that. Do you have other sources where I can find a solution for my profile picture issue? Can continue the track now..

Issue

I'm sorry I couldn't help you with that. Maybe you can ask some more experienced people here for help.