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

Jennifer Andrade
Jennifer Andrade
2,074 Points
Posted by Jennifer Andrade
Jennifer Andrade
2,074 Points

My image is not responding to the code, on my About Page for "How to Make a Website" My image shows up, but is not round

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 50%;
}
Alan Johnson
Alan Johnson
7,625 Points
Alan Johnson
Alan Johnson
7,625 Points

Can you post your HTML for the about page too?

Jennifer Andrade
Jennifer Andrade
2,074 Points
Jennifer Andrade
Jennifer Andrade
2,074 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jennifer Andrade | Developer Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Jennifer Andrade</h1>
        <h2>Developer 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/jen.jpg" alt="Photograph of Jennifer Andrade" class="profile-photo">
        <h3>About</h3>
        <p>Hi, My name is Jennifer Andrade! and here is were you will find my best work on Coding/Web Developement/Network Security. Other than my work I like making cute things from home, gardening and site seeing.</p>
        <p>If you like to follow me on Twitter, my username is <a href="http://twitter.com/jandradedotcom">jandradedotcom</a>.</p>
      </section>
      <footer>
        <a href="http://twitter.com/jandradedotcom"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://www.facebook.com/jenniferandradedotcom"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Jennifer Andrade.</p>
      </footer>
    </div>
  </body>
</html>
Luke Glazebrook
Luke Glazebrook
13,564 Points

Hey Jennifer!

You may of noticed that your code hasn't posted very well onto the forums. This is because you haven't told the forum that you are going to be posting code so make sure to do that next time so your code is properly and nicely formatted and syntax highlighted!

If you do not know how to do this take a look at the Markdown Cheatsheet below the forum input box.

3 Answers

Luke Glazebrook
Luke Glazebrook
13,564 Points
Luke Glazebrook
Luke Glazebrook
13,564 Points

Hi Jennifer!

If you want the image to be totally round you will need to set the border-radius attributes value to 100%. This will round it off into a perfect circle for you!

-Luke

Jennifer Andrade
Jennifer Andrade
2,074 Points
Jennifer Andrade
Jennifer Andrade
2,074 Points

Hi, I tried that too at first, wondering if it is the Workspace?

Jennifer Andrade
Jennifer Andrade
2,074 Points
Jennifer Andrade
Jennifer Andrade
2,074 Points

I figured it out, I had to down size the image instead of a 200x200px to 100x100px

Simon Truong
Simon Truong
2,179 Points
Simon Truong
Simon Truong
2,179 Points

Hi,

Yeah, the profile-photo you would like to upload has to be the size of a square in its original format.

Peace,

Nam