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
Aaron Walden
1,370 PointsCode Challenge: Make a CSS image gallery
Challenge: Add a margin of 2.5% to the gallery list items. Then, set the text color and background to colors of your choosing.
Bummer! Be sure to set the color for gallery list items to a color of your choosing.
img { max-width:100%; }
gallery {
margin: 0;
padding: 0; list-style: none;
}
gallery li {
float:left; max-width: 45%; margin: 2.5%; background: #999999; }
gallery li a {
color:#000000;
}
What am I missing here?
7 Answers
Guil Hernandez
Treehouse TeacherHey Aaron Walden,
You'll need to use a color value other than `#000'. Since that's the browser's default text color, the code challenge isn't detecting any changes being made to the text color.
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, Aaron Walden:
The challenge is asking you to style the list items themselves to have a color of your choice, not the links within them.
Aaron Walden
1,370 PointsThe challenge is as follows:
Add a margin of 2.5% to the gallery list items. Then, set the text color and background to colors of your choosing.
error: Bummer! Be sure to set the color for gallery list items to a color of your choosing.
I tried:
gallery li {
float:left;
max-width: 45%;
margin: 2.5%;
color:#000;
background-color:#999;
}
Still same error.
Kevin Lozandier
Courses Plus Student 53,747 PointsWhat' the link to this challenge? Also know that that gallery li can be the appropriate way of referring to the elements that make up the gallery. Did you mean .gallery?
Aaron Walden
1,370 Pointshttps://teamtreehouse.com/library/make-a-css-image-gallery
Its supposed to be id="gallery" in the HTML document. so I would think its #gallery li { }
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, Aaron Walden:
I just went over the challenge and was able to successfully able to complete it with the changes I recommended to you.
You need to correctly refer to the elements representing the gallery. In this case, the appropriate element has an id of gallery. You would refer to it as #gallery and its list items via #gallery li.
Any color combination seems to be in fact valid; I chose maroon and #CCC to be the color of the background and the color of the text.
Aaron Walden
1,370 PointsCan you copy and paste your code that was successful into here? If you look at the code in the question I did exactly as you describe but get the error. My code goes-
gallery li
{ float:left; max-width: 45%; margin: 2.5%; color:#000; background-color:#999; }
where is the error? Thanks for the help Kevin! I am pulling my hair out trying to figure out where the error is!
edit: the comment isnt showing the # but its there in the code in editor.
Kevin Lozandier
Courses Plus Student 53,747 PointsAaron Walden: You're also using max-width instead of width. Resolving that, as well as making sure your CSS identifier is referring to #gallery li instead of gallery li, you should be able to now pass this challenge.
Aaron Walden
1,370 PointsNope. I did change that max-width to width though. Everything has a # where it needs to be. If I preview the code it will show the selected background color. I think its a bug in the editor. I rewatched the video and copied what he did line for line and it still gives the same error.
Nicks code/video is here:http://teamtreehouse.com/library/how-to-make-a-website/styling-web-pages-and-navigation/style-the-portfolio
Kevin Lozandier
Courses Plus Student 53,747 PointsWhat Nick is doing isn't necessary what the challenge is asking: I've provided the answer below:
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
color: maroon;
background-color: #CCC;
}
Sean Clipsham
1,664 PointsKevin, thank you very much for your help.
silvia flores
3,464 PointsI got. it make sure to make a comment after code challenge. But yes using maroon or a name... no # w maroon unlike #CCC or #any hex dec. no. I think that is what i got stuck on. no biggies. Smart people figure it out.