Why isn't my code working?

Question

This looks right to me, what am I missing?

css/main.css

@media screen and (min-width 480px){
body{
background: navy;
  }
}
a {
  text-decoration: none;
}

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

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

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

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

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

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

nav li {
  display: inline-block;
}

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

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

.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;
}

Answer 1 · 2015-05-01T17:01:05Z

May 1, 2015 5:01pm

Kelly,

This is a simple syntax error. You're missing the colon after "min-width" in your media query.

/* you have this */
@media screen and (min-width 480px){ /* note there is no colon after "min-width" */
    body{
        background: navy;
    }
}

/* you need this */
@media screen and (min-width: 480px){ /* note the colon after "min-width" */
    body{
        background: navy;
    }
}

Add that colon in like I've done above, and you'll be moving right along!

Erik

Welcome to the Treehouse Community

Looking to learn something new?

Kelly Martin

Kelly Martin

Why isn't my code working?

1 Answer

Erik McClintock

Erik McClintock

Kelly Martin

Kelly Martin