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

Posted by Melody Schech
Melody Schech
2,977 Points

Stage 7 Adding Pages to a website: the about page

This is my coding for centering the photo and having the image round intead of square. The image is still square and not centered.

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

The 150, 30, and 100 are in red in the workspace so it seems that I have something wrong.

Any suggestions on what I am missing?

4 Answers

Melody Schech
Melody Schech
2,977 Points

I found the answer in another question. It turns out that when using Firefox I have to have the period and also add clear: both; to the code styling.

Oh, I should have given credit to the person who answered the other question, sorry

Stephen Bone
Stephen Bone
12,359 Points
Stephen Bone
Stephen Bone
12,359 Points

Hi Melody

At a glance I'm not too sure that the rules you've specified will do all that you want but one thing I've noticed is make sure you have the a period in front of profile-photo as this specifies that it's a class.

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

Hope it helps!

Melody Schech
Melody Schech
2,977 Points

Thank you, when I add the period as shown in the lesson and your example, the photo does not show up at all. Other than that, the coding is the same as from the lesson.

Stephen Bone
Stephen Bone
12,359 Points
Stephen Bone
Stephen Bone
12,359 Points

Your CSS appears to be exactly the same as the code I used (mine's posted below) although it's been a little while since I did this course so I wonder if the error lies elsewhere.

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

I'm assuming before changing your CSS you could at least see the image?

Lonnie Wibberding
Lonnie Wibberding
18,318 Points
Lonnie Wibberding
Lonnie Wibberding
18,318 Points

I think Stephan nailed the main problem. You also might need at max-height, depending on the image proportions.

Lonnie Wibberding
Lonnie Wibberding
18,318 Points
Lonnie Wibberding
Lonnie Wibberding
18,318 Points

Is the capitialization different, or an underscore rather than hyphen in the class on the html element?