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 Make an About Page

Posted by Elizabeth Collier
Elizabeth Collier
2,273 Points

Give the image a maximum width of 150 pixels and a border radius of 100%.

what do I need to do

about.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/gratt.png" alt="description" class="profile-photo">
        <p>All about meeeee!</p>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>
css/main.css 
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

img {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}
#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 auto;

2 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Elizabeth,

Assuming nothing else has been added to the stylesheet since the beginning of the challenge you should only need to add the following to the bottom of the stylesheet:

.profile-photo {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}

Adding the above passes the challenge successfully for me.

Hope that helps :)

-Rich

Elizabeth Collier
Elizabeth Collier
2,273 Points

I already tried that

Rich Bagley
Rich Bagley
25,869 Points

Odd, that worked for me no problems. I can't help notice that you had some other changes in your stylesheet that weren't there by default such as the below near the top of the style sheet:

img {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}

Ignoring the first 2 stages which are related to the HTML...

Task 3 of 5 Select the image and set it to be a block element.

So, line 66 of the stylesheet add this (nothing else):

.profile-photo {
  display: block;
}

Task 4 of 5 Center the image using margin, and also add 30 pixels of margin to the bottom.

So, what you've just added now becomes:

.profile-photo {
  display: block;
  margin: 0 auto 30px;
}

Task 5 of 5 Give the image a maximum width of 150 pixels and a border radius of 100%.

The final code will be:

.profile-photo {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}

Hope that helps expand on the above.

-Rich

Danielle San Miguel
Danielle San Miguel
5,442 Points
Danielle San Miguel
Danielle San Miguel
5,442 Points

In your CSS, you only have:

img { display: block; margin: 0 auto 30px; max-width: 150px; border-radius: 100%; }

You need to be more specific in which img you're targeting, even if there's only one img in your html right now. The img has a class for a reason - so you can specifically target that photo. So for this instance, you would write:

.profile-photo { display: block; margin: 0 auto 30px; max-width: 150px; border-radius: 100%; }

Elizabeth Collier
Elizabeth Collier
2,273 Points

it still says the answer is wrong