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 How to Make a Website Adding Pages to a Website Add and Style Icons

Ashley Chenn
Ashley Chenn
8,329 Points
Posted by Ashley Chenn
Ashley Chenn
8,329 Points

I set the font size to "font-size: 0.9em;" per the instructions, but keep getting an error. Do I have the wrong syntax?

I set the font size to "font-size: 0.9em;" per the instructions, but keep getting an error. Do I have the wrong syntax?

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 ul {
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}
Jim McQuarrie
Jim McQuarrie
1,871 Points
Jim McQuarrie
Jim McQuarrie
1,871 Points

I just took the challenge and simply added .contact-info { font-size: 0.9em; margin: 0; padding: 0; list-style: none; } and it passed, hope this helps! You do not need to add the "ul" as contact-info is a class in the "ul"

4 Answers

Jim McQuarrie
Jim McQuarrie
1,871 Points
Jim McQuarrie
Jim McQuarrie
1,871 Points

I just took the challenge and simply added .contact-info { font-size: 0.9em; margin: 0; padding: 0; list-style: none; } and it passed, hope this helps! You do not need to add the "ul" as contact-info is a class in the "ul"

Frederick Reiss
Frederick Reiss
15,003 Points
Frederick Reiss
Frederick Reiss
15,003 Points

I took a look at what student Andren did, here is his comment from 4 days ago;

You are not selecting ul elements with a class of .contact-info, you are selecting ul elements nested within an element with a class of .contact-info.

To combine selectors like tag selectors and class selectors you have to not have a space between them (as that makes it a descendant selector) and the ul has to come first. The proper selector looks like this:

ul.contact-info { } .... ul.contact-info { font-size: 0.9em; margin: 0; padding: 0; list-style-type: none; }

I tested it out and it works...

Frederick Reiss
Frederick Reiss
15,003 Points
Frederick Reiss
Frederick Reiss
15,003 Points

I do not have an answer for you, from a software testers view point and that's what I do everyday, sometimes with different browsers, many of them with older versions unexpected results occur from time to time. I am still learning but was trying to help by finding a solution that worked, where you found a more concise solution, I think that's great. By the way I notice the word 'PRO' how is the course work different? Happy coding...

Jim McQuarrie
Jim McQuarrie
1,871 Points
Jim McQuarrie
Jim McQuarrie
1,871 Points

Pro just means the package that you purchase - pro version :)

We need good software testers for sure Frederick :)

My self, I am an applications developer at Bank of America and specialize in front end as a whole and writing in Angular 1... and now converting everything to Angular version 2... :) I actually canceled my Treehouse subscription (finished front end program and most of full-stack couple years back) and signed up under another email so I could go back through as a refresher. Treehouse is great and provided me another career with a six figure income in under 6 months, I think that speaks volumes about the material here and what you can do with it. Jim McQuarrie

Frederick Reiss
Frederick Reiss
15,003 Points
Frederick Reiss
Frederick Reiss
15,003 Points

The answer that I gave above was for the first step:

1 of 5 ul.contact-info { } .... ul.contact-info { font-size: 0.9em; margin: 0; padding: 0; list-style-type: none; }

A. I reviewed 'Build the Contact Page': https://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/build-the-contact-page "look for any errors, when I am studying after 10 hours at work testing, it's easy to over look something... about 4:27 there's mention of the <ul class="contact-info"></ul> section B. Also take a look at your 'main.css' following Nick the instructor with... https://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/add-iconography ; I find that whatever code snippets that they are currently teaching about are reinforced in the challenge... note that Nick use's .contact-info { font-size: 0.9em; margin: 0; padding: 0; list-style-type: none; } in his instruction

C. @01:45 be careful about any spaces.

2 of 5 Select the anchor elements inside the contact-info list. A. @06:12 Nick talks about Anchor elements... follow along in 'main.css' I copied from my main.css >>> .contact-info a { display: block; } This worked.

3 of 5 With the anchor elements inside the contact-info list still selected, set a minimum height of 20 pixels. Then add a declaration that will prevent the background from repeating. A. @07:39 Add the following two code snippets... min-height: 20px; background-repeat: no-repeat; This worked.

4 of 5 With the anchor elements inside the contact-info list still selected, set the background size to 20 pixels square. Then set the left padding to 30 pixels, with all other padding at 0. A. @08:20 follow Nick and he talks about the following code snippets... background-size: 20px 20px; padding: 0 0 0 30px; This worked.

5 of 5 With the anchor elements inside the contact-info list still selected, set the bottom margin to 10 pixels. Set all other margins to 0. A. @08:46 follow Nick and add the margin>> margin: 0 0 10px; This worked.

B. Does this Help? What I have found that help's me when I start a new section while listening to the instructor, I type everything that that they type into the Work space's but I also up up tabs for the challenges & quizs sometime doing things in parallel.