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
Adam DuQuette
629 PointsPicture in "About" won't center
Hey all. I'm working on the section where we add a profile picture to the About section, round the edges, add some margin, and center. However, when I run the code (exactly how it is shown in the video) it throws the picture to the right of my first two headers.
Now, I commented out the "display: block;" portion and it returns the photo to a position below the first two headers and above the third header (which says "About") but not centered.
Why would it move the picture to the right (and off the screen unless you scroll horizontally) of my first two headers by adding "display: block;"?
.profile-photo { display: block; max-width: 150px; margin: 0 0 30px 0; border-radius: 100%; }
2 Answers
Rivka Stein
2,541 PointsAre you using firefox?
Look at the teachers notes bellow the video. There is a correction for Firefox. The code should be:
.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
Adam DuQuette
629 PointsYou are exactly correct! I'm using Firefox and completely missed that teachers note. Thank you, making that change fixed it!
geoffrey
28,736 PointsNot easy for me to help you with these piece of information. Could you post the HTML code and your CSS please ?
Bolton Osazuwa
9,154 PointsBolton Osazuwa
9,154 PointsSame thing happened for me when I was at that part. I think I ended up changing the display to inline-block instead. For ex.
.profile-photo { display : inline-block; etc... }