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

Posted by Justin Evans
Justin Evans
1,703 Points

Anything i add to Responsiveness makes my header or nav disappear.

Anything i add past 660px to change my header or nav they just disappear when i increase the size of the screen.

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

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

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

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

}

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Justin Evans | Programmer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' 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>Justin Evans</h1> <h2>Programmer</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>
      <img src="img/jona.jpg" alt="Photograph of Justin Evans" class="profile-photo">
      <h3>About</h3>
      <p>Hi, I' Justin Evans!  This is my application for code louisville.  I love video games and working out</p>
      <p>If you want to follow me on twitter my username is <a href="http://www.twitter.com/ijonalol">@ijonalol</a></p>
    </section>
    <footer>
      <a href="http://twiter.com/ijonalol"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="facebook Logo" class="social-icon"></a>
      <p>&copy; 2015 Justin Evans.</p>
    </footer>
  </div>

</body> </html>

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Justin,

Are you saying that when the 660px media query takes effect you lose your logo and nav?

Does it look like your header is collapsing where you're losing the background color of the header?

1 Answer

Sara Victoria
Sara Victoria
1,249 Points
Sara Victoria
Sara Victoria
1,249 Points

Hi Justin, I am not 100% sure what you mean but I noticed that you have a double bracket at the end of this line... .profile-photo { float: left; margin: 0 5% 80px 0; } }

also a space between the id="

<div id= "wrapper">

hope that helps