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
Odysseus MacArthur
1,347 PointsProfile photo does not respond well to display:block
Hey,
.profile-photo{ /display:inline-block;/ max-width:150px;
margin: 0 auto 30px;
border-radius:20%;
}
When I uncomment display:block; , my photo disappears!! Does anyone know why?
5 Answers
Christopher Davis
10,399 PointsAre you using Mozilla Firefox? I am using Firefox and had the same issue. It won't display the photo on display:block but will display it on display:inline-block (but it floats it left which doesn't look as nice). I checked the download files in Firefox and Safari and confirmed it there. Then I tested my page and it worked beautifully in safari.
Jonathan Grieve
Treehouse Moderator 91,253 PointsIt looks like it's because you didn't uncomment the code correctly.
CSS multiline comment are in this format. /* your code */
Also you're using inline-block which is probably affecting how your image is displaying.
As you know, to display as block level element use display: block ;
Hope this helps.
Odysseus MacArthur
1,347 PointsJonathan,
Sorry, this is the code I have.
.profile-photo{ display:block; max-width:150px;
margin: 0 auto 30px;
border-radius:20%;
}
The picture does not show up when I use this code. If I take the display:block; line away, the picture shows up, but too far to the left.
What do you think?
Thanks.
Jonathan Grieve
Treehouse Moderator 91,253 Pointsthe margin declaration is a cause of interest for me.
Do you need to use the 30% value?
Actually scratch that, the third value is a bottom-margin declaration.
Try doing something with the second value in the right and left margins.
Failing that, look at your other elements, see if there's something else pushing your element away. :-)
Odysseus MacArthur
1,347 PointsChristopher,
That was the issue! Strange that Firefox which is a leading browser has this bug (Is it a bug?)