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 trialLaurentiu Borza
1,571 Pointsdisplay: block removes the profile picture from the "About"page
.profile-photo { display: block; /auto margins to center the image on the page. Not to be displayed as usual inline with the text. */ max-width: 150px; margin: 0 auto 30px; border-radius: 100%;/ makes the picture completely round*/ }
If I take away the "display: block" line, the profile picture will re-appear, but not centered....
4 Answers
Nigel Abrasaldo
2,592 PointsYou can include 'clear' property with a 'both' value for that class. It should fix the issue.
Walter Allen
iOS Development with Swift Techdegree Student 16,023 PointsThis is what was happening for mine, but I didn't discover the issue until I got into the Responsive Web Design Section. Adding the following code took care of the issue when the browser window was narrow (as it would be on a smartphone):
clear: both;
Thank you, Nigel!
Kristen Sexton
7,149 PointsI had the exact same problem. That fixed it!
Jacie Fortune
8,969 PointsAlso, you are missing an asterisk on your last comment as well.
Laurentiu Borza
1,571 PointsThank you, Nigel, it worked!!!
Sharon Eller
3,090 PointsAdding clear: both; worked for me too. Thanks!
Randy Wressell
3,491 PointsRandy Wressell
3,491 PointsIf what you posted from above is verbatim:
.profile-photo { display: block; /auto margins to center the image on the page. Not to be displayed as usual inline with the text. / max-width: 150px; margin: 0 auto 30px; border-radius: 100%;/ makes the picture completely round/ }
You are missing an asterisk in your first comment at the beginning. I have the following code: