'How to make a website' - media query above 660px causes header and navigation to disappear.

Question

Adding the 660px media query causes the header and navigation to disappear and also causes the contents to jumble around.

This is my index.html page

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mitchell Little | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet">
    <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>Mitchell Little</h1> 
        <h2>Designer</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 colour and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending notes 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 photoshopped 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>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/mitchhlittle"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>    
        <a href="http://facebook.com/mitch.little1"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2017 Mitchell Little.</p>
      </footer>
    </div>
  </body>
</html>

This is the 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: 1px;
}

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 (Margin in video: 0;)
************************************/

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

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

h3 {
  margin: 19px 0;
}

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

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

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

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

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



/***********************************
COLOURS
************************************/

/*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 links*/
nav a, nav a:visited {
  color: #fff;
}

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

and this is the responsive.css which contains the media queries

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

  /***********************************
  TWO COLOUM 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) {

  /***********************************
  HEADER
  ************************************/

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

  #logo {
    float: left;
    margin: 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;
  }
}

I have tried a number of things and checked out other answers to this issues.

Thank you!!

Answer 1 · 2017-04-28T16:34:41Z

April 28, 2017 4:34pm

Try giving your header a height and width in your 660+.

Also, in your main.css file you are selecting the header with an id="header", so in CSS your selector is #header; however, in your index.html your header has NO id, so the #header in your main CSS isn't going to be visible.

I hope it helps!

Answer 2 · 2017-04-28T16:43:30Z

April 28, 2017 4:43pm

Definitely, as Cory mention above, what it makes the header to disappear is in the heading section of you main.css file. You are targeting the header as an id instead of a type selector.

Moreover, be careful with you CSS syntax. You missed a semicolon in the colors sections of your main.css in the color declaration of your body rule and also in the footer section of your main.css file you used two colons instead of one in the font-size declaration in your footer rule.

Welcome to the Treehouse Community

Looking to learn something new?

Mitch Little

Mitch Little

'How to make a website' - media query above 660px causes header and navigation to disappear.

2 Answers

Cory Harkins

Cory Harkins

Mitch Little

Mitch Little

Leandro Botella Penalva

Leandro Botella Penalva

Mitch Little

Mitch Little