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

HTML How to Make a Website Adding Pages to a Website Style New Pages

daniela
daniela
2,629 Points
Posted by daniela
daniela
2,629 Points

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?

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

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Hi 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:

  1. hit return to create a new line and type three back tick characters ```

  2. hit return to create another new line and paste your HTML

  3. 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:

#gallery li {
  float: left;
  width: 45%;
}

6 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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.

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
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Great 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
Jason Anello
Courses Plus Student 94,610 Points

Thanks Dave! We're lucky to have you on the forums.

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Great catch! Sorry about that, Jason Anello. I've added this correction to the notes section for this video.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Thanks, Nick. That should be a big help to any firefox users working through this project.

Ruben Leija
Ruben Leija
4,051 Points
Ruben Leija
Ruben Leija
4,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.

daniela
daniela
2,629 Points
daniela
daniela
2,629 Points

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!

Daniela

Brian OLeary
Brian OLeary
16,197 Points
Brian OLeary
Brian OLeary
16,197 Points

Thanks to everyone. Found the same problem & solution here. TeamTreeHouse is great!!!

David Pretlow
seal-mask
.a{fill-rule:evenodd;}techdegree
David Pretlow
Front End Web Development Techdegree Student 8,603 Points
David Pretlow
.a{fill-rule:evenodd;}techdegree
David Pretlow
Front End Web Development Techdegree Student 8,603 Points

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 Sawyer
Timothy Sawyer
31,052 Points
Timothy Sawyer
Timothy Sawyer
31,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.