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

Leslie Pico
Leslie Pico
4,190 Points
Posted by Leslie Pico
Leslie Pico
4,190 Points

Header is wrong above 660px

My site looks great when the browser is set to 660px or less but when I go above that, after editing the media query for desktops my header and logo change to the same colors that I have my #gallery text and background color set to. What am I doing wrong?

Edit! Forgot to add http://cdpn.io/djtnc

5 Answers

Travis Thompson
Travis Thompson
12,976 Points
Travis Thompson
Travis Thompson
12,976 Points

Hey Leslie,

It looks like you are wrapping your <nav> element outside your <header> element in your html. You will need to add a css property of overflow: hidden to your <header> since you have both your <nav> and #logo floated. This way you will see your purple background past 660px.

Try this: 

 <header>
      <a href="index.html" id="logo">
        <h1>Leslie Helen Pico</h1>
        <h2>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>

Then in your css do this: 

header {
    border-bottom: 5px solid #7b6ab4;
    margin-bottom: 60px;
    overflow: hidden;
}
Travis Thompson
Travis Thompson
12,976 Points
Travis Thompson
Travis Thompson
12,976 Points

Looks like the html and css markdown didn't work at first. Looks like it is good to go now. Happy building!

Bryan Jenkins
Bryan Jenkins
5,438 Points
Bryan Jenkins
Bryan Jenkins
5,438 Points

In this case, it looks like your header stays at about 119px through the responsive transition. In that case, you could always define the height of your header. 

header {
  height: 119px;
}

and another issue, as Travis pointed out, is the <nav> element is currently outside of the <header> tags. So just copy the nav block and paste it inside your header tags after the logo link.