Did you set the display property of the profile image to be block? Select the image and set it to be a block element.

Question

Need help on this step

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="Photo of Calvin Secrest" class="profile-photo">
        <p> Hi, I'm Calvin Secrest! This is my design portfolio where I share all of my favoriter work in Physics work.
          doing equations, I enjoy extreme sports, exercising, playing the drums and more.</p>
        <p>If you'd like to follow me on Twitter,, my user name is <a href="http://twitter.com/nickrp">@irradiant_force</a>.</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;
}

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

Answer 1 · 2015-08-07T01:52:06Z

August 7, 2015 1:52am

Hi Calvin,

Welcome to Treehouse. You are doing great.

To change your profile picture to display block, you need to target it with a CSS selector (in the CSS file).

There are a couple ways you could do this, but the best way (and the way the challenge requires you to) is by using a class selector. You photo currently has a class of "profile-photo"

<img src="img/gratt.png" alt="Photo of Calvin Secrest" class="profile-photo">

So that is what we will use in CSS. To change it to block, you need to use 'display' and set it to block.

.profile-photo {
  display: block;
}

I hope this helps and clears it up for you. Keep Coding! :)

Answer 2 · 2015-08-07T01:52:16Z

August 7, 2015 1:52am

First, you need to find how to select just the profile image. If you look, you can see that it has the class "profile-photo". To select this class in css do this:

.profile-photo {
 }

Now you just need to change the "display" property of that class.

Welcome to the Treehouse Community

Looking to learn something new?

Calvin Secrest

Calvin Secrest

Did you set the display property of the profile image to be block? Select the image and set it to be a block element.

2 Answers

Jason Anders

Jason Anders

Calvin Secrest

Calvin Secrest

Hayley Swimelar

Hayley Swimelar

Calvin Secrest

Calvin Secrest