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 Write CSS Media Queries

Posted by Livvy Reece
Livvy Reece
1,649 Points

Create a breakpoint for devices 480 pixels wide or larger

please help i have tried several times to fix this with no success

css/main.css 
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;
}
@media screen and (max-widht: 480px)
 {
   body{
   background:navy;
   }
}
Brian Steele
Brian Steele
23,060 Points
Brian Steele
Brian Steele
23,060 Points

you have a spelling error in 'width'

Livvy Reece
Livvy Reece
1,649 Points

thank yiu very much Brian! would you be able to also help in this? https://teamtreehouse.com/community/inside-the-media-query-clear-the-left-side-of-every-4th-item-in-the-gallery

1 Answer

Sanjay Tailor
Sanjay Tailor
8,443 Points
Sanjay Tailor
Sanjay Tailor
8,443 Points

Try this code: NOT max-width but min-width... when the screen size is minimum 480 and above

@media screen and (min-width: 480px) {
  body {
    background: navy;
  }
}
mikes02
mikes02
Courses Plus Student 16,968 Points

This is the correct answer, it is asking for 480 pixels and above, therefore min-width: 480px is the appropriate media query. If it was asking for a maximum of 480px and below, you would use max-width: 480px instead.

Livvy, if this addresses your question, it is strongly encouraged that you select it as the Best Answer. This awards the contributor of the correct answer some bonus points, and also lets others know who may be facing the same or similar issue that there is a correct answer within this thread.