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
Robert Hall
4,656 PointsI'm setting the font size to 0.9em as the instructions say, but when I go to check it, it says that it's the wrong size.
As far as I can tell, I am doing the code correctly. However, the code challenge insists that I'm not setting the font size to 0.9em. My code for this challenge is at the bottom of my code.
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 ul {
font-size: 0.9em;
margin: 0;
padding: 0;
list-style: none;
}
4 Answers
Jason Anders
Treehouse Moderator 145,860 PointsHey Robert.
You're pretty much correct, except for the selector. The challenge wants you to select the unordered list with the class of contact-info, so you need to drop the ul part and you'll be good to go.
.contact-info {
font-size: 0.9em;
margin: 0;
padding: 0;
list-style: none;
}
Keep Coding! :)
Neil Anuskiewicz
11,007 PointsWhat happens when you use this?:
ul.contact-info {
font-size: 0.9em;
margin: 0;
padding: 0;
list-style: none;
}
Steven Parker
231,236 PointsMix Neil's answer with Jason's explanation and you have it. They both may pass the challenge, but only one selects the elements as specified.
contact-info is: ul.contact-info.
What the selector "contact-info ul" targets is "unordered lists which are descendants of elements with class contact-info".
Jason Anders
Treehouse Moderator 145,860 PointsIt will pass the challenge. In this example, it produces the result the code checker is looking for, and in this example it doesn't really matter which way you select it. However, in larger projects, it can make a huge difference when you use elements chained with classes.
Lets modify this example to explain. What if on one page you have your "Contact Information" in an Unordered list with the class contact-info and on another page (or another part of a page) you have a Footer or a Nav or decided (for formatting) that an Ordered List works better here and all these have the contact-info class.
In the CSS, you want every instance of your "Contact Information" to have a blue font colour... If you selected ul.contact-info, ONLY the contact-info class located in an unordered list will have blue fonts. However, if you use .contact-info, EVERY instance of the class will have blue fonts.
This is a very simple example, but I hope it helps clear up the difference.
:)
Robert Hall
4,656 PointsThanks very much Steven and Neil.
Jason Anders
Treehouse Moderator 145,860 PointsHey Steven Parker,
The more I read the question, the more I kind of lean towards the ul.contact-info. Both ways do pass the challenge, but I originally read it as "select an unordered list (using this tag just because that was in the code) with the class ... So, I always thought it wanted to target the class only.
I honestly don't know which is 100% correct here as both pass the challenge. Maybe Nick Pettit could share which one he actually expected here and why?
Neil Anuskiewicz
11,007 PointsJason, yes it does clear it up. To summarize:
- This is class level, this rule affects all .contact-info class unless specified elsewhere (i.e., a more specific or local that trumps this).
.contact-info {
font-size: 0.9em;
margin: 0;
padding: 0;
list-style: none;
}
- In this case, it would only affect the font size within the UL element. It's more precisely targeted.
ul.contact-info {
font-size: 0.9em;
margin: 0;
padding: 0;
list-style: none;
}
Neil Anuskiewicz
11,007 PointsDoes anyone have the precise wording of the question? I could go back and pull it but if someone has it handy, we could take a look and see if we could determine if Nick's intent was the more specific UL or the more general class.
Jason Anders
Treehouse Moderator 145,860 Points"Select the unordered list with the class contact-info and set the font size to 0.9em. Then, remove all margin, padding, and list styling."
After reading it over, I now believe you and Steven are correct in that it is wanting the more specific ul.contact-info.
:)
Neil Anuskiewicz
11,007 PointsNeil Anuskiewicz
11,007 PointsJason, would he want to use ul.contact-info?
Robert Hall
4,656 PointsRobert Hall
4,656 PointsThank you, Jason, for your prompt and thorough explanation.