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

Holly Holliday
Holly Holliday
1,563 Points
Posted by Holly Holliday
Holly Holliday
1,563 Points

"Inside the media query, select the list items inside the gallery and add a width of 28.3333%." Need help with question.

I know it's in a Gallery li which reads as follows in challenge

gallery li {

float: left; width: 48; margin:25%

I keep trying to change the width to 28.3333% Why is it not working? Thanks

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: 28.3333%;
  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) {

}
Nurul Ahsan
Nurul Ahsan
2,039 Points

@media screen and (min-width:480px){ #gallery li{
width: 28.3333%;

}

}

I think its right but Bummer! "Be sure to set the width of gallery list items to 28.3333% when the browser is wider than 480px."

Md.Nurul Ahsan Chowdhury(nurulahsan@gmail.com)

Nurul Ahsan
Nurul Ahsan
2,039 Points

Mr.Rich Donnellan, Thanks for asking question. Width of li inside the gallery should be fixed not over width:28.3333%; @media screen and (min-width:480px){

gallery li{

max-width:28.3333%;

} }

3 Answers

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

Hey Holly,

It's asking you to add it to the media query section. Doing so will allow it to resize to this width if the window reaches a certain size.

Media query:

@media screen and (min-width: 480px) {
  /*add rule here*/
}

Make sense now?

–Rich

Darren Kynaston
PLUS
Darren Kynaston
Courses Plus Student 15,610 Points
Darren Kynaston
Darren Kynaston
Courses Plus Student 15,610 Points

You must place the new code inside of the media query:

@media screen and (min-width: 480px) {
     #gallery li {
     width: 28.3333%;
     }
}

This new code will only be triggered if the media query (min-width: 480px) is TRUE.

Hope that helps.

Darren

Yariv Steinberg
Yariv Steinberg
1,788 Points
Yariv Steinberg
Yariv Steinberg
1,788 Points

I've been doing the exact same code, and still got the same error.

Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

Yariv,

Can you post your code? Use the Markdown Cheatsheet (below) for formatting options.

Nurul Ahsan
Nurul Ahsan
2,039 Points
Nurul Ahsan
Nurul Ahsan
2,039 Points

@media screen and (min-width:480px){ #gallery li{
max-width: 28.3333%;

}

}

Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

You clearly didn't follow the Markdown formatting.

Adding the following two lines inside the media allowed me to pass:

@media screen and (min-width: 480px) {
 #gallery li {
   width: 28.3333%;
}

Make sure you're using width, not max-width; formatting might come into play as well.