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

Header is disappearing after adding responsive CSS.

Header disappears / changes color to white. Profile picture and text are also floating right.

Everything was working okay until I added the following responsive CSS.

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

} </p>

Main css is here:

<p>/***********************
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-bottom: 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;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}



/***********************
CONTACT
***********************/

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

.contact-info a{
  display: block;
  min-height: 20 px;
  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;
}

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

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

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

/* navlink */
nav a, nav a:visited {
 color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}






</p>

html code:

<p > <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CMC | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,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>CMC</h1>
        <h2>Designer</h2>
       </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section id="primary">
        <h3>General Information</h3>
        <p>I am not looking for work. I am available for other engagements though.</p>
        <p>Please use email only for contacting me.</p>
      </section>
      <section id= "secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
        <li class="phone"><a href="tel:087 9876543">087 9876543</a></li>
          <li class="mail"><a href="mailto:caoimhin@caoimhin.com">caoimhin@caoimhin.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>
      <footer>
        <a href="http://google.ie"><img src="img/twitter.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://rte.ie"><img src="img/facebook.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2015 CMC.</p>
      </footer>
    </div>
   </body>
</html>
</p>

6 Answers

Hi caoimhin,

In your main.css file you accidentally put a colon after your header selector here:

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

This would cause all those styles to be ignored. float: left is the important one here because it's what's preventing the header from collapsing when its children are floated in the media query.

Arsalan Raja
Arsalan Raja
6,508 Points

hi, you have syntax error in you main.css if you see you header section you added colon after header property header : { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

it should be

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

try second set of code every thing will be fine, and i recommend you to use css validator it will help you to find out problem.

craigschotchii
craigschotchii
9,115 Points

It appears you need to clear the floats on the responsive.css file. This is due to the float right of the nav and then the float left of the logo it will collapse the entire container they are in. ie the header. In the responsive.css file you can add to the file a overflow:auto as seen below.

  header {
    border-bottom: 5px solid #599a68;
    margin-bottom: 60px;
    overflow: auto;
  }

I would suggest looking up 'clearfix' as the single line above is a hack and not originally intended for this type of thing however it usually works.

craigschotchii
craigschotchii
9,115 Points

Cant believe i didnt see the below listed issue. My bad. Disregard my comment above.

Thanks for the help everybody, all looks good now.

Will check out some code validators. Can you reccomend any? Thanks.

I think later in the course Nick covers validation.

Here's the html validator: https://validator.w3.org/

The css validator: https://jigsaw.w3.org/css-validator/

Nice one. Thanks Jason.

Nice one. Thanks Jason.