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
Trouble with "display: block" in css for profile photo
Below are the codes that I have in my workspace. My problem is that adding a block value to the class "profile-photo" makes the profile image disappear. When I played with the code to try inline instead, it showed the picture, but of course the center values didn't apply anymore. What am I doing wrong?
<img src="images/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
margin: 0 auto 30px;
Thanks for the help!
Edit: Based on this being a firefox only problem my comments about Nick's working code being different from the project files are probably not true. In the video, he's using a different browser and so we don't see the problem.
I haven't been through this project yet so I might not be giving you the correct solution based on what Nick is trying to teach you. Obviously, it is showing correctly in the video so there must be some difference in his working code versus what he's showing you to type.
I downloaded the project files for that video and the image does appear for me but it is hung up on the right side of the header just off the top right of the screen. I had a horizontal scrollbar and was able to scroll horizontally to the right to see it. Is it the same for you?
I noticed that the header is floated left and when I remove that style from the header rule (around line 33 in the css file) the image will display correctly.
Alternatively, you can use
clear: left in your
.profile-photo rule. This would clear the float and make sure your block level image will be on a new line.
Is it possible that the float: left was needed for an earlier version of the website and he took it out at some point?
I hope this helps.
Ruben Leija4,051 Points
I think you gave the img tag a block presence, so it acts like a div tag. You must add height to make show. Let me know if that help. try adding width also.
Thank you to everyone who answered! This is such an amazing website!!
Jason, you are absolutely right! I couldn't see the picture since it floated all the way to the right off my screen's viewing area. I cleared the float an it worked like a charm! You are awesome! Thanks!
Dave, thanks for the info for future posts to add my html and css code to appear correctly in the forums. I noticed that after I wrote the post that it didn't show like I was writing it. This will help a lot in the future when I will undoubtedly have more questions. :)
Both great lessons learned. Thanks!
Thanks to everyone. Found the same problem & solution here. TeamTreeHouse is great!!!
I've been working through this video series using Safari. When I shrunk the Contact Page to Mobile size Nick's photo was not centering - it was staying on the left margin. Now I've downloaded Google Chrome and Nick's photo remains centered.
However, the background icons for phone, Twitter, and email are in the background in the <p> area on a large screen. They sit properly when I shrink the screen to mobile size and the links drop below the paragraph sections.
Any ideas? thanks
Timothy Sawyer31,052 Points
I was definitely confused. Here I was, working with an image (img/gratt.png), and then it said to add styling to "the image". That lasted for about a half hour until I looked for help. Someone suggested styling the img selector instead of the profile-photo class; and it worked.