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

Posted by Pedro Meio-Dia
Pedro Meio-Dia
3,896 Points

.profile-photo { display: block; } doesn't work, why, if it is the right class and right declaration?

Is there any thing wrong with the 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" alt="here is the discription of the image" class="profile-photo">
        <p>Hi, my name is Pedro Meio-Dia and I will become soon a Front End Web Developper</p>
        .profile-photo {
display: block;
}

doesn't work, why if it is the right class?
      </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;
}

3 Answers

Pedro Meio-Dia
Pedro Meio-Dia
3,896 Points
Pedro Meio-Dia
Pedro Meio-Dia
3,896 Points

I sorted it out friends!

I wasn't aware of the css tab of the challange. Sam and steve, you both were right from the beginning.

Thank you so much,

God bless you for your generous helping hand.

Steve Hunter
Steve Hunter
57,712 Points

No problem!

Any problems, just ask.

Steve.

Steve Hunter
Steve Hunter
57,712 Points

No problem!

Any problems, just ask.

Steve.

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Hi Pedro - in this code challenge it asks for you to set the display: block; property using the image selector not the class, so like below:

img {
display: block;
}

So add this to your css code file.

Pedro Meio-Dia
Pedro Meio-Dia
3,896 Points

Thanks Sam,

I did as you said but the "Bummer" is still there nonetheless.

Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

I literally went to the code challenge and passed it using the img css selector - are you sure you are putting this code into the main.css file and not the html index file - there is a tab at the top of the code challenge.

Steve Hunter
Steve Hunter
57,712 Points
Steve Hunter
Steve Hunter
57,712 Points

You need to put the .profile-photo{} part in the css file, not the html.

Steve.

Pedro Meio-Dia
Pedro Meio-Dia
3,896 Points

Yes, I know. But since the the challange came with the html display and they told me to select the image, that's why I did so, though I found it strange too.

Steve Hunter
Steve Hunter
57,712 Points

I see. The word 'select' what is used to describe writing a line of code for that particular html element.

So, in this example, you do need to 'select' the img tag - that's just a bit of odd parlance used when describing css.

I hope you got it sorted.

Steve.