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 Refactor the Layout

Posted by Joshua Smith
Joshua Smith
7,237 Points

I've added the width rule inside of the break point, but it says I haven't. Please help.

I'm taking a code challenge where it asks me to add a width of 28.3333% inside the media query. When I do, it asks me if I've added the width rule.

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 (min-width: 480px) {

}

#gallery li {
  width: 28.3333%;
}

#gallery li:nth-child(4n) {
  clear: left;
}

3 Answers

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

You forgot to put your code into curly bracket. Make sure your code always go between the opening and closing bracket. Like this

@media screen and (min-width: 480px) //opening bracket here{



#gallery li {
  width: 28.3333%;
}

#gallery li:nth-child(4n) {
  clear: left;
}
}//closing bracket end here
Nurul Ahsan
Nurul Ahsan
2,039 Points

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

gallery li {

max-width: 28.3333%; }

}

Joshua Smith
Joshua Smith
7,237 Points
Joshua Smith
Joshua Smith
7,237 Points

Thank you so much! Was driving me nuts!

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

You're welcome bro.

Mindy Sandilands
Mindy Sandilands
15,743 Points
Mindy Sandilands
Mindy Sandilands
15,743 Points

It looks like you have a simple syntax error with one two many curly braces within your media query function. Delete the curly brace before this line:

gallery li {

width = 28.3333%; }

Hope this help! Mindy