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

Posted by MUZ140896 Tadiwa Chokwenda
MUZ140896 Tadiwa Chokwenda
3,153 Points

Please help with this question as I cant seem to get the answer.

At the bottom of this CSS file is a media query. Inside the media query, create a selector that chooses all list items that are nested inside the element with the id of "gallery". Then, inside your newly written selector, set the width property to a value of 28.3333%.

7 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

Your media query should look something like this:

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

The full code to pass the task:

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%;
   }
}
Anne Grethe
Anne Grethe
1,586 Points

That challenge must be broken. I tried with that exact answer and it still says that it's not right...

Aurelio Decock
Aurelio Decock
14,607 Points
Aurelio Decock
Aurelio Decock
14,607 Points

Ok, so you need to select the list item, which is li. But since they ask you to select every li in the div with an id of gallery you'll need to select that id before you select the li. That way the browser knows which li you are talking about. I'll give you an example:

I want all p tags in the div with id mainContent, and set it the have a background color of red.

So i select the ID and then the p tag after and give it the background color of red:

#mainContent p {
        background-color: red;
}

Now it's up to you ;)

Bonnie Martin
Bonnie Martin
13,671 Points
Bonnie Martin
Bonnie Martin
13,671 Points

This is still broken! I've used that exact text and it doesn't work. Please fix! We can't get past this as it is now.

Jay Padzensky
Jay Padzensky
4,731 Points
Jay Padzensky
Jay Padzensky
4,731 Points

Hi folks,

I've checked in with our teaching team who confirmed the CC isn't responding properly. I've alerted our CC devs who should be looking into this as soon as possible. Thank you for your patience!

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

Just tried it with the code in my answer above and it seems to work for me.

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

Make sure you are placing this at the end of the style sheet as if it comes before where the styles are declared for #gallery li they will be overidden.

MUZ140896 Tadiwa Chokwenda
MUZ140896 Tadiwa Chokwenda
3,153 Points
MUZ140896 Tadiwa Chokwenda
MUZ140896 Tadiwa Chokwenda
3,153 Points

gallery li {

width: 28.3333%;

that's what i used and it still gives me a bummer note. so what possibly can i do

Bonnie Martin
Bonnie Martin
13,671 Points
Bonnie Martin
Bonnie Martin
13,671 Points

That was the same thing I put in yesterday, and it didn't work. It is working now, though. Thanks.

vinay prajapati
PLUS
vinay prajapati
Courses Plus Student 1,140 Points
vinay prajapati
vinay prajapati
Courses Plus Student 1,140 Points

/********************************** 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: 0; }

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 ***********************************/

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

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

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

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

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

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

/********************************** COLORS ***********************************/

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

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

joshankiewicz
joshankiewicz
1,262 Points
joshankiewicz
joshankiewicz
1,262 Points

Isn't #gallery and #gallery li two separate elements

so when i was inputting the code i did it as

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

gallery {

width: 28.3333%;
} }

At the bottom of this CSS file is a media query. Inside the media query, create a selector that chooses all list items that are nested inside the element with the id of "gallery". Then, inside your newly written selector, set the width property to a value of 28.3333%.