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

Posted by Eric Denton
Eric Denton
4,552 Points

At >480px preview, NAV bar and #logo "disappear" and all page elements move up into the previous NAV area (on all pages)

I even went back through Nick's code (in the "DOWNLOADS") and went line for line and am doing everything the same... However, when I load his in a browser - IT WORKS?

I tried changing the "RESPONSIVE.CSS" "NAV" background direction from "none" to "inherit" and that only made the nav area green again...

Eric Denton
Eric Denton
4,552 Points

If you're curious: index page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Eric Denton | Code/UX/Design</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,400italic,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Eric Denton</h1>
        <h2>Code/UX/Design</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>Drips created using Photoshop 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="https://twitter.com/--------------"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://www.facebook.com/--------------"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Eric Denton.</p>
      </footer>
    </div>
  </body>
</html>
Eric Denton
Eric Denton
4,552 Points

main.css

/**************************
GENERAL
***************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width:940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration:none;
}

img {
  max-width: 100%;
}

h3 (
  margin: 0 0 1em 0;
)



/**************************
HEADING
***************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin; 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/**************************
NAVIGATION
***************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding:15px 10px;
}




/**************************
FOOTER
***************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/**************************
PAGE: PORTFOLIO
***************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}



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

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 10px auto 30px;
  border-radius: 10px 40px;
}



/**************************
PAGE: CONTACT
***************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}


/**************************
COLORS
***************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a,nav a:visited {
  color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673F;
}
Eric Denton
Eric Denton
4,552 Points

responsive.css

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

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

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

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



  /**********************************
  PAGE: PORTFOLIO
  ***********************************/
      /**************************
      3 columns x 5 margin/each (2.5 each side per item)= 15
      100% - 15% = 85% space left over to split 3 ways
      85 / 3 = 28.333333333333
      ***************************/

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

  /**************************
  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;
  }


}

1 Answer

Stephan L
Stephan L
17,821 Points
Stephan L
Stephan L
17,821 Points

At 660px, you float your "nav" and "logo" elements, which collapses the parent header element.
Not sure if that's covered yet in this part of the course, but floating elements will take them out of the normal document flow. If elements are floated out of a parent container that has no other content to give the parent container height, then that parent container will collapse. In this case, your nav and logo elements are not actually disappearing: the text color is the same as the body background color (white) so you're not seeing them. The green background of the header element has collapsed.

A simple fix is setting an explicit height for the header element. I added "height: 150px" on the header element in the 660px media query and that seemed to solve the problem.
Later on, you may see a trick called a "clearfix" which accomplishes the same thing. Hope that helps!

Eric Denton
Eric Denton
4,552 Points

Thanks! I like the height adjustment!

I knew the nav and logo were there, but I couldn't do anything about it (I suppose that's the purpose of TREEHOUSE!)... I ended up pasting all of Nick's source code in mine, and lo and behold... IT WORKS?!? I cmnd+Z/cmnd+Y 'd each pasting to see if I could figure out what I messed up and I still don't know. I even found a line Nick forgot to close with an ";" (seems like it really didn't affect anything, just a syntax thing I suppose).

Thanks for your help!