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 trialdaniela
2,629 PointsTrouble 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?
HTML code
<img src="images/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
CSS code
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
Thanks for the help!
Daniela
6 Answers
Jason Anello
Courses Plus Student 94,610 PointsEdit: 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.
Hi Daniela,
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.
Dave McFarland
Treehouse TeacherGreat catch, Jason! You're correct -- the image doesn't disappear, it just moves way off to the right. Updating the .profile-photo
rule does the trick:
.profile-photo {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
Jason Anello
Courses Plus Student 94,610 PointsThanks Dave! We're lucky to have you on the forums.
Nick Pettit
Treehouse TeacherGreat catch! Sorry about that, Jason Anello. I've added this correction to the notes section for this video.
Jason Anello
Courses Plus Student 94,610 PointsThanks, Nick. That should be a big help to any firefox users working through this project.
Ruben Leija
4,051 PointsI 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.
daniela
2,629 PointsThank 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!
Daniela
Brian OLeary
16,197 PointsThanks to everyone. Found the same problem & solution here. TeamTreeHouse is great!!!
David Pretlow
Front End Web Development Techdegree Student 8,603 PointsI'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 Sawyer
31,052 PointsI 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.
Dave McFarland
Treehouse TeacherDave McFarland
Treehouse TeacherHi Daniela,
Your HTML and CSS code wasn't showing up correctly. I fixed it in your post.
For the future, to put HTML/CSS/JavaScript in a forum post:
hit return to create a new line and type three back tick characters ```
hit return to create another new line and paste your HTML
hit return and add three more back tick characters: ``` The back tick character isn't the same as the single quote -- ' -- mark; the back tick is located on the same key as the ~ on most keyboards.
Also to add correct color highlighting add the name of the language after the back ticks like this: ```CSS. Here's what CSS should look like in a forum post: