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

Changing display value to block on .profile-photo makes the picture disappear.

When I change the .profile-photo display value to block, the photo disappears. If I keep it inline, the photo reappears, but isn't centered. Does anyone know why my photo would disappear from changing the display value to block?

Here is the CSS rule for .profile-photo

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

I've added the clear: left; declaration, as someone suggested. That makes the image appear, but it isn't centered like in Nick's video. Am I missing something?

***EDIT: I see that I forgot to specify pixel on the first value of the margin. i've fixed it and 'auto' for right/left now centers it. Thanks everyone! Adding clear: left; to the CSS rule made the image appear. *I am using Firefox

3 Answers

Albert Evangelista
Albert Evangelista
27,689 Points

this happened to me too while I was using the firefox browser. what I did to fix it was I cleared the left of the photo in the css. clear: left

Thanks, Albert. That made the image come up. I just added the declaration clear: left; to the .profile-photo {} rule. However, it isn't centered like in Nick's example. How do I center the image in the page using CSS?

Gregory Serfaty
Gregory Serfaty
37,140 Points

Are you try to changing the display to inline-block ?

Thanks Gregory. I did try changing the display to inline-block and that too made the image come up. I was just wondering why it doesn't work when I use the exact same code as in the video? Thanks, again.

Thanks Gregory. I did try changing the display to inline-block and that too made the image come up. I was just wondering why it doesn't work when I use the exact same code as in the video? Thanks, again.

I have the exact same problem except clear: left made it come back centered.