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

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

Posted by Joshua Porch
Joshua Porch
2,045 Points

Help! Profile picture is not appearing in the right place after applying the .profile-photo css styling!

My problem is, in the CSS, even though I made sure my code in the ".profile-photo" class perfectly matches the code nick shows in the video, when I preview my web page, my photo does not appear centered above the "About" paragraphs, but rather, it is not visible at all until I scroll all the way over to the right, and discover that the photo has been shoved into the top corner of the page, beside the nav bar. This only occurs when setting display to "block". If I set it to inline block, the photo appears in the correct vertical area of the page, just too far to the left.

I'm using Firefox. Could this just be a browser error or is there something else causing the problem? Like I said before, I've combed through the code and it's exactly the same as what nick showed in the video. I don't know what to do, please help!

victor ollervidez
victor ollervidez
14,934 Points
victor ollervidez
victor ollervidez
14,934 Points

Hi please post a copy of your code so we can help! :D

Joshua Porch
Joshua Porch
2,045 Points

Well here is the css:

.profile-photo {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}

and here is the html:

<img src="img/josh.jpg" alt="Photograph of Joshua Porch" class="profile-photo">

1 Answer

victor ollervidez
victor ollervidez
14,934 Points
victor ollervidez
victor ollervidez
14,934 Points

Hmm the only thing i can think of is since you are using firefox add the clear: both property like this.

.profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

Hope that helps

Joshua Porch
Joshua Porch
2,045 Points

Thanks Victor, that worked. So my only other question now is, will having "clear: both;" affect how the photo appears in other browsers, or is that just a bug fix for firefox that wont do anything in other browsers?

victor ollervidez
victor ollervidez
14,934 Points
victor ollervidez
victor ollervidez
14,934 Points

Hi sorry for the late response, but yea it's just a bug on Firefox, I've tested it out on chrome and it worked fine for me the clear: both didn't break it.

Michelle Pepe
Michelle Pepe
Courses Plus Student 409 Points

Thank you, it worked : )