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

Maggie Kaplun
Maggie Kaplun
514 Points
Posted by Maggie Kaplun
Maggie Kaplun
514 Points

block level elements

The tip given is: Did you set the display for links inside of the contact-info list to block? I'm not understanding the question; my attempted code is on the last few lines.

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

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

li a .contact-info{
  display: block;
}
Jo-wayne Josephs
Jo-wayne Josephs
19,748 Points

Hi, the problem here seems to be with your CSS selectors. If the tip says "the display for links inside of the contact-info list to block", then it means that the contact-info class should come first, then the links inside like so: .contact-info a { display:block; }

1 Answer

andren
andren
28,558 Points
andren
andren
28,558 Points

The display: block; is correct, the issue is the selector you are using. They ask you to select anchor elements (a) nested inside the list (ul) with a class of contact-info. That requires a selector that looks like this:

ul.contact-info a {
  display: block;
}

By using a tag selector (ul) and a class selector contact-info together without a space you combine them. And then by using a space and specifying a, you create a descendant selector that only selects nested elements of that type.