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

Posted by Andrew Mills
Andrew Mills
6,073 Points

about page image won't center and turn into a circle

I'm curious as to why my about page image won't center and turn into a circle.

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

8 Answers

David Curtis
David Curtis
11,301 Points
David Curtis
David Curtis
11,301 Points

Because you have .profile-photo as your class in your CSS and have it as Profile-photo in your HTML (notice the letter "p" is capitalized in the second one and not the first). Choose one and use it in both places and you should be good. Let us know!

Zack Taylor
Zack Taylor
9,021 Points
Zack Taylor
Zack Taylor
9,021 Points

class="Profile-photo" --- in your codepen it had a small p. try that as your id's might be different due to the uppercase.

David Curtis
David Curtis
11,301 Points
David Curtis
David Curtis
11,301 Points

Without seeing anything else, try display: inline-block.

Zack Taylor
Zack Taylor
9,021 Points
Zack Taylor
Zack Taylor
9,021 Points

Try using prefix's as well like.... -webkit-border-raidus:

Andrew Mills
Andrew Mills
6,073 Points
Andrew Mills
Andrew Mills
6,073 Points

I'm using the files provided for the tutorial. Might it be something in my html, my css is spot on?

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Andrew, if you post your HTML someone can check. The CSS looks fine.

Andrew Mills
Andrew Mills
6,073 Points
Andrew Mills
Andrew Mills
6,073 Points 
<div id="wrapper">
      <section>
        <img src="img/nick.jpg" alt="Photograph of Andrew Mills" class="Profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Andrew Mills! I am an artist that is now learning how to make websites. It's a lot of work, like most anything worth doing. I enjoy running, walks on beaches, sunsets, painting, and chess.</p>
        <p>If you would like to follow me on twitter my username is <a href="http://twitter.com/arden_mills">@arden_mills.</a></p>
      </section>
Andrew Mills
Andrew Mills
6,073 Points
Andrew Mills
Andrew Mills
6,073 Points

Thank you so much for your help Zack, David, and Tom! Learning that case sensitivity is important (I'm so green at this) I'll be more careful in the future. I really appreciate your help!

David Curtis
David Curtis
11,301 Points
David Curtis
David Curtis
11,301 Points

Glad you got it working!