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

CSS How to Make a Website Adding Pages to a Website Make an About Page

Jenny Bowling
Jenny Bowling
689 Points
Posted by Jenny Bowling
Jenny Bowling
689 Points

I can't get past setting the display to block for an image. Help!

<img src="img/gratt.png" alt="Photograph of Nick Pettit" class="profile-photo"> <p>Hi! I am learning HTLM and CSS and this is my first attempt at building a mobile website so bare with me. </p>

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="Photograph of Nick Pettit" class="profile-photo">
          <p>Hi! I am learing HTLM and CSS and this is my first attempt at building a mobile website so bare with me. </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;
}

5 Answers

Ramiro Martinez
Ramiro Martinez
13,858 Points
Ramiro Martinez
Ramiro Martinez
13,858 Points

You need to target the class..

.profile-photo {
  display: block; 
}
Jenny Bowling
Jenny Bowling
689 Points
Jenny Bowling
Jenny Bowling
689 Points

I had that but with more information than just the display. Thank you!

Jenny Bowling
Jenny Bowling
689 Points
Jenny Bowling
Jenny Bowling
689 Points

That didn't work either. I even copied yours and it didn't pass. :(

Ramiro Martinez
Ramiro Martinez
13,858 Points
Ramiro Martinez
Ramiro Martinez
13,858 Points

I used the same code and I got it right...

Ramiro Martinez
Ramiro Martinez
13,858 Points
Ramiro Martinez
Ramiro Martinez
13,858 Points

Here is all the code: 

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;
}
.profile-photo {
  display:block; 
}
roxannecarlson
roxannecarlson
8,131 Points
roxannecarlson
roxannecarlson
8,131 Points

It is not working if you are using the Firefox browser. I am having the same problem. However, when I copied and pasted the URL to Internet Explorer, it worked fine. I believe the problem lies with how Firefox is interpreting the command. At any rate, this is a problem, because it is also not showing the alternative language, which it should. A solution to the problem would be handy. Thanks.

Jenny Bowling
Jenny Bowling
689 Points
Jenny Bowling
Jenny Bowling
689 Points

Thanks for the information Roxanne. Where did you place the URL you copied? I tried a couple of things without success.

roxannecarlson
roxannecarlson
8,131 Points
roxannecarlson
roxannecarlson
8,131 Points

I copied the URL from my Firefox address bar and pasted it in the address bar of Internet Explorer.