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

Jared Hensley
Jared Hensley
8,106 Points
Posted by Jared Hensley
Jared Hensley
8,106 Points

When I try to float #logo to the left, it shifts my nav up. check out my code please!

Here is my responsive css

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

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

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

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



   /* *******************************
   3 * 5 = 15 (3 colums with 5% margin each)
  100% - 15% = 85% leftover for images
  85/3 = 28.3333333333
   *********************************/



   /* *******************************
   PAGE: PORTFOLIO THREE COLUMN LAYOUT
   *********************************/



  #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) {

   /* *******************************
   PAGE: HEADER
   *********************************/

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

  #logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
  }



}

Here is my Index.html code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jared Hensley | Web Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,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>Jared Hensley</h1>
        <h2>Web Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
           <a href="img/numbers-01.jpg"> 
             <img src="img/numbers-01.jpg" alt=""> 
             <p>Experimentation with color and texture.</p>
           </a>
          </li>
          <li>
           <a href="img/numbers-02.jpg"> 
             <img src="img/numbers-02.jpg" alt=""> 
             <p>Playing with blending modes in Photoshop.</p>
           </a>
          </li>
          <li>
           <a href="img/numbers-06.jpg"> 
             <img src="img/numbers-06.jpg" alt=""> 
             <p>Trying to create an 80's style of glows..</p>
           </a>
          </li>
          <li>
           <a href="img/numbers-09.jpg"> 
             <img src="img/numbers-09.jpg" alt=""> 
             <p>Drios created using Photoshoop brushes.</p>
           </a>
          </li>
          <li>
           <a href="img/numbers-12.jpg"> 
             <img src="img/numbers-12.jpg" alt=""> 
             <p>Creating shapes using repetition.</p>
           </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/jaredhensley732"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/mcflyhensley"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 Jared Hensley.</p>
      </footer>
    </div>
  </body>
</html>

2 Answers

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

It's because when you float an element,you take it in of "normal document flow".

To fix this try putting a clear fix n your navigation element. 

.clearfix {
display: table;
content: "";
clear: both;
}
Jared Hensley
Jared Hensley
8,106 Points
Jared Hensley
Jared Hensley
8,106 Points

Thank you Jonathan, I'll keep this in mind. I had an extended response in your double post but it was deleted as I was posting, hence a double deletion lol. Anyways, I'm really enjoying the critical thinking aspect of this whole gig so thank you. Actually, my layout now looks like the instructors after he added a couple of more things which is strange...but hey, I'm still a rook. Cheers.

jordans
jordans
1,609 Points
jordans
jordans
1,609 Points

In your CSS, make sure you style the h1, h2, and header tags under @media min-width: 660px. I'll put an example below:

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

    nav {
        background: none;
        float: right;
        font-size: 1.125em;
        margin-right: 5%;
        text-align: right;
        width: 45%;
    }
    #logo {
        float: left;
        margin-left: 5%;
        text-align: left;
        width: 45%;
    }
    h1 {
        font-size: 2.5em;
    }
    h2 {
        font-size: 0.825em;
        margin-bottom: 20px;
    }
    header {
        border-bottom: 5px solid #599a68;
        margin-bottom: 60px;
    }
}
Jared Hensley
Jared Hensley
8,106 Points
Jared Hensley
Jared Hensley
8,106 Points

I appreciate the help but I think this is one step forward from where I stopped, so even when I add this, it does not bring the navigation element back down to where it should be. My navigation is floated right but in the middle of the header after I float #logo to the left.