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 cathy mitchell
cathy mitchell
8,249 Points

select the image and set it to be a block element

here is what my code is and the error state did you set the display image to display block.

img { display: block; }

2 Answers

Poul Larsen
Poul Larsen
5,902 Points
Poul Larsen
Poul Larsen
5,902 Points

CSS

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

HTML

<section>
    <img src="img/gratt.png" alt="This is an alternative description of the image" class="profile-photo">
    <p>This is some text to the image about me</p>
</section>
cathy mitchell
cathy mitchell
8,249 Points

I have done all the suggested advise and it still gives me the error that have you set the profile image property to be blocked. Now I am wondering if I am putting it in the right place?????

Poul Larsen
Poul Larsen
5,902 Points
Poul Larsen
Poul Larsen
5,902 Points

The challenge says:

Add the profile picture "img/gratt.png" inside the section element. Then, write a description in the alternate attribute and add the class "profile-photo" to the image.

the section element is the tag called section

<section>
<!-- your  images code goes here -->
</section>

insert image code in between section and /section tag

<section>
   <img src="img/gratt.png">
</section>

we then give the image an alt tag - alternate attribute

<section>
   <img src="img/gratt.png" alt="this is the image description">
</section>

and add the class "profile-photo" to the image

<section>
   <img src="img/gratt.png" alt="this is the image description" class="profile-photo">
</section>

index.html - The image is inside of the div called wrapper

<!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"> <!-- After this div wrapper goes section with image -->
          <section>
            <img src="img/gratt.png" alt="this id the image description" class="profile-photo">
            <p>here is a paragraph that goes with the image</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>

main.css

/******** this is the code for the image ******/
.profile-photo {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}
/******** this is the code for the image ******/



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