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 Style New Pages

My About page profile photo has disappeared.

When i view my about page my profile photo has disappeared. This happened when i started to do css for the about page. I think it may be to do with the display: block;.

About page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chad Garner | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic,900|Ubuntu:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Chadwick Garner</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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
        <h3>About</h3>
        <p>Hi, Im Chad Garner. This is my portfolio of all my designs and creations. I like to exercise, play video games and learn.</p>
        <p>If you'd like to follow me on twitter then my profile is <a href="http://twiiter.com">@Chad</a>.</p>
      </section>
      <footer>
        <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Chadwick Garner.</p>
      </footer>
    </div>
  </body>

</html>

CSS:

/**************
GENERAL
**************/


a {
  text-decoration: none;
}

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

body {
  font-family: 'Ubuntu', sans-serif;
}

img {

  max-width: 100%;
}



/**************
HEADING
**************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

nav {
  background: #599a68;
}

header {
 background: #6ab47b;
 border: #599a68;
}

h1 {
  font-family: 'Roboto', san-serif;
  margin: 15px 0;
  font-size: 1.75em;
  line-height: 0.8em;
  font-weight: normal;
}

h2 {
  font-size: 0.75em;
  font-weight: normal;
  margin: -5px 0 0;


}


/**************
NAVAGATION
**************/

nav {
  text-align: center;
  margin: 20px 0 0;
  padding: 10px 0;

}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;

}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}


/**************
FOOTER
**************/

footer {
  text-align: center;
  clear: both;
  padding-top: 50px;
  font-size: 0.75em;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}


/**************
PAGE PORTFOLIO
**************/

#gallery {

  margin: 0;
  padding: 0;
  list-style: none;

}

#gallery li {

  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7
}

#gallery li a p {

  margin: 0;
  padding: 5%;
  font-size: 0.75em;
}

/**************
PAGE ABOUT
**************/

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



/****************
COLOURS
****************/

a {
  color: #6ab47b;
}


h1,h2 {
  color: #fff;
}


nav a, nav a:visited {
  color: #fff;
}

nav a.selected, nav a:hover {
  color: #32673f
}

body {
  background-color: #fff;
  color: #999;
}

4 Answers

I have fixed the problem. I'm using mozilla firefox as my browser and the latest version makes the display: block; remove the picture. in order to fix this problem i have had to add clear: both; to my css. This fixed the problem.

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

Hey, thanks! This worked for me too!

This might be the issue: you have a couple of lines in your CSS that are not ending with semi-colon ( ; ). the color in #gallery li and in nav a.selected, nav a:hover are missing the semi-colon.

Try that.

actually I think its because of the display:block.... that happened to me as well, my img was not showing and then something happened.... just tested the kid's code and it seems to be fine

close it, save ur stuff and reopen your page...

display:block centers the img right?

@ christian Hi i have added the semi-colons but i still seem to have the same problem. @adolf Yes the display block centers the image. I have looked in my about css and i cant see any letters missing :/.

Got it! Double check ur code buddy, u r missing 2 letters in there... somewhere... :P in the about css....

Just an aside, you have a "twiiter" in one of your About paragraphs.

Hi, The twiitter is supposed to be there, was part of the course to add it into my paragraph. Thanks anyway.