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 trialMelody Schech
2,977 PointsStage 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
2,977 PointsI 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
12,359 PointsHi 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
2,977 PointsThank 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
12,359 PointsYour 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
18,318 PointsI think Stephan nailed the main problem. You also might need at max-height, depending on the image proportions.
Lonnie Wibberding
18,318 PointsIs the capitialization different, or an underscore rather than hyphen in the class on the html element?