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 trialJoshua Porch
2,045 PointsHelp! 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!
Joshua Porch
2,045 PointsWell 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
14,934 PointsHmm 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
2,045 PointsThanks 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
14,934 PointsHi 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
Courses Plus Student 409 PointsThank you, it worked : )
victor ollervidez
14,934 Pointsvictor ollervidez
14,934 PointsHi please post a copy of your code so we can help! :D