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 trialReeeeka Jemma
552 PointsIn my About page I am not able to see the profile pic after I add the css .profile-pic { display: block;
I have followed along with the videos and everything worked fine until I added the css for the about page. When I added:
.profile-pic { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
the photo went away. If I disable it then the pic comes back. If I just disable the display: block; the pic comes back and is on the left. What is going on?
3 Answers
Ian Kersey
9,318 PointsIt seems like this is an issue with your display settings. When an element is set to display: block it will take up the entire block of the page, whereas setting display to inline-block will allow the element to be displayed on the same line with other elements. Inline-block takes the element out of the normal DOM flow and allows it to be floated or positioned alongside other elements. Since the picture shows up without changing the name of the file I doubt it's a naming issue.
Try setting the display of .profile-pic to inline-block instead of block.
Emma Willmann
Treehouse Project ReviewerMy first thought is the class for the image. When I did it, the class was "profile-photo", not "profile-pic". That could be the issue.
Reeeeka Jemma
552 PointsI used class "profile-photo" first and then changed it everywhere to "profile-pic" just to make sure there wasn't an issue with the name. The same thing happened either way. The photo will appear until I add css to the About page.
Emma Willmann
Treehouse Project ReviewerI've got it working just fine. Can you post all of your html and css? There's a Markdown Cheatsheet under the comment/answer box that shows how to post code.
pablocubillos
10,047 PointsHello all. I FIXED IT just by changing the name of the picture, which is in the about.html under class="profile-picture" by something different like: class="profile-pict" (I juts took out the last 3 letters). I made this changes in the about.html, main.css, responsive.css worksheets. Seems it is an indentation bug.
Mike Morales
19,833 PointsMike Morales
19,833 PointsI had that same problem. I had to change block to inline-block to make it work.