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 Alexander Davison
Alexander Davison
65,469 Points

Give the image a maximum width of 150 pixels

What is wrong? I just find where is wrong... Someone help me out!

PS: I am on Task 5 of 5

Thanks in advance! :dizzy:

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

FULL CODE:

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" class="profile-photo" alt="profile-photo">
        <p>Cake cake cake cake cake cake cake</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;
}

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

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

2 Answers

Mitchell Fargher
Mitchell Fargher
11,634 Points
Mitchell Fargher
Mitchell Fargher
11,634 Points

You have img listed twice in your css.

The first had img with: max-width : 150px;

Then down lower you list img again with: max-width : 100%;

The second img tag is "cascading" over the first and causing your max-width to be 100% instead of the 150px.

Remove this second img and you should be good.

Alexander Davison
Alexander Davison
65,469 Points

Thank you so much!!! :smile:

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

The wording is a bit misleading. It's asking you to target the image with the class of .profile-photo, not the img tag itself.

Redeclare using the class and you should be all good!

Alexander Davison
Alexander Davison
65,469 Points

Sorry but using the img tag as the selector works. :dizzy:

Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

It may "pass", but the intention isn't to set all images to that specific max-width, full border-radius, and margin spacing, just the user profile picture.

Alexander Davison
Alexander Davison
65,469 Points

Hmm... I see. Didn't know that.

Mitchell Fargher
Mitchell Fargher
11,634 Points
Mitchell Fargher
Mitchell Fargher
11,634 Points

Yes, typically you would want to use the class for best practice. The img tag works in this as it is the only img, but Rich is correct for normal use.