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
Ralpheal Louis Ubok
2,503 PointsCSS code display: block for .profile-photo
Hi Nick,
I followed along your tutorial on creating an about page for this project on Mozilla FireFox on version 27.0.1. Looks like the display: block; does not display the photo. However, I tried on Internet Explorer 11.0.3, Google Chrome Version 33.0.1750.146 m and Opera 20.0 and the code works as per you tutorial. Is there a bug in Moz FF? Or the browser does'nt support the code? Thanks!
14 Answers
Natasha McDiarmid
11,400 PointsYou didn't wrap the image in a div.
I'm seeing this:
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
That's going to change your layout from what it was because you have a float on the image. If you want the image above the copy like you had at the beginning, you need to remove the float on your profile-photo or add clear:both;.
Natasha McDiarmid
11,400 PointsDid you specify the height and width of the image?
Ralpheal Louis Ubok
2,503 Points.profile-photo {
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
this code works with Google Chrome, IE 11 and Opera but not with Fire Fox
Ralpheal Louis Ubok
2,503 Pointsyeah in CSS
.profile-photo {
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
Natasha McDiarmid
11,400 PointsDo you have a link you can toss?
Ralpheal Louis Ubok
2,503 Pointshey Natasha...sorry for the wait...uploaded the working file to the server....here's the link http://www.webvionics.com/test/index.html try it with different browser to see what i mean....thanks
Natasha McDiarmid
11,400 PointsTry adding display:block to your image directly like so:
.profile-photo img {
display: block;
}
.profile-photo {
border-radius: 100%;
margin: 0 auto 30px;
max-width: 150px;
}
Ralpheal Louis Ubok
2,503 Pointshi Nat, the pic popped out but it won't center like google chrome. thanks
Natasha McDiarmid
11,400 PointsWrap your image in a div to get more control:
HTML:
<div id="about-img">
<img class="profile-photo" align="middle" src="img/nick.jpg" alt="Photograph of Nick Pettit">
</div>
CSS:
#about-img {
margin: 0 auto;
width: 150px;
}
Ralpheal Louis Ubok
2,503 Pointsi tried the suggestion u gave, but it totally changed the responsive layout, did you test with other browser?
Natasha McDiarmid
11,400 PointsCan you throw up those changes on the link so I can see the real thing?
Ralpheal Louis Ubok
2,503 Pointsok i've uploaded the files
Ralpheal Louis Ubok
2,503 Pointswow thanks a lot! i did the changes as per below:
.profile-photo { display: block; max-width: 150px; border-radius: 100%; margin: 0 auto 30px; clear: both; }
the "clear: both;" fixed the problem....
Natasha McDiarmid
11,400 PointsAwesome! Good luck with the rest of it.
Ralpheal Louis Ubok
2,503 Pointsthanks for helping me out