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

Maria Lotlikar
Maria Lotlikar
1,490 Points
Posted by Maria Lotlikar
Maria Lotlikar
1,490 Points

Tried to do this challenge 3 times and it caused some issues on the last task and wouldn't let me pass.

Tried to do this challenge 3 times and it caused some issues on the last task and wouldn't let me pass. It looks like there is a bug in the website not letting me finish this challenge. What do I do?

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%;
}
Adam Mould
Adam Mould
5,458 Points

Hi Maria,

Your CSS looks great, however the first part of the challenge is asking you to do the following:

"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."

If we look at your snippet of code that's targetting the unordered list:

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

You are targetting the unordered list using the ID of gallery instead of the class of contact-info. Also remember to set the font size to 0.9em. So the correct way of completing this challenge would be to amend the above code snippet to the following:

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

.contact-info li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
Steve Hunter
Steve Hunter
57,712 Points

Isn't it after selecting the unordered list with the class .profile-photo:

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

That worked for me ... I'm just working my way through the rest of the challenge to check it continues to pass to the end.

The next task is to select the anchor element inside the .profile-photo class and make it a block:

.contact-info a {
   display: block;
}

Your code lacks the "a" out so it is applying to the whole class.

I'll keep going! Hope this helps.

Steve.

1 Answer

Steve Hunter
Steve Hunter
57,712 Points
Steve Hunter
Steve Hunter
57,712 Points

I completed the tasks with the following additional code:

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

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  padding: 0 0 0 30px;
  background-size: 20px 20px;
  margin: 0 0 10px 0;
}

I hope that makes sense.

Steve.