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

Odysseus MacArthur
Odysseus MacArthur
1,347 Points

Profile 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
Christopher Davis
10,399 Points

Are 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
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

It 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
Odysseus MacArthur
1,347 Points

Jonathan,

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
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

the 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
Odysseus MacArthur
1,347 Points

Christopher,

That was the issue! Strange that Firefox which is a leading browser has this bug (Is it a bug?)