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
Michael Suchy
8,118 PointsPhoto not showing in website
Hi. This is the first time asking a question, so forgive me if I am not clear. I am having trouble with the below “class” that I set up. The photo does not seem to be showing. However, when I remove “display:block;” from the class, the photo does show up, but not centered. It makes me think there is something wrong with the “display:block;”. I included the CSS and html code below. Does everything look ok? Any suggestions? Thanks in advance for your help.
CSS code .profile-photo { display:block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
html code <img src="img/nick.jpg" alt="Photo of Me" class="profile-photo">
12 Answers
Adam Moore
21,956 PointsWith the code that you have given so far, it should work. If something is not working, it's probably because of some of the settings that you have for the <section> or some other part of your HTML and/or CSS.
Michael Barnette
614 Pointshtml code isn't showing up
Michael Suchy
8,118 PointsThanks. It must have got cut off. Here is the html. I am not sure if this is enough info.
<img src="img/nick.jpg" alt="Photo of Me" class="profile-photo">
Adam Moore
21,956 PointsThe code is not all showing up. If you put your code in three of these marks: ````````(the one with the ~ and in them), then the code will be placed in a code block with a black background and color-coded print. The CSS that you have written in here so far doesn't look wrong, and when I apply it to an image of my own, it shows up just fine, even with the display: block. It might have something to do with other code that you have written or the image's placement in conjunction with other HTML and/or CSS that you have.
Michael Suchy
8,118 PointsLet's try this.
Thanks.
<img src="img/nick.jpg" alt="Photo of Me" class="profile-photo">
Michael Suchy
8,118 PointsOk. It is still not showing. I will look at it again and see if I can figure it out. Thanks.
Michael Barnette
614 PointsHey Michael,
I am pretty new to programming and I am looking for a cpl of people to discuss it with whenever.
if you are fairly new too, then send me a pm with a skype contact or whatever msg program you have.
Take care
Adam Moore
21,956 PointsThe key on my mac at the top left with the ~ above what looks like a comma, that's the key you use. If you do one of those marks, it'll make the print look like this: display: block. If you do three of them, it'll do this:
div{
display: inline-block;
height: 100px;
width: 200px;
}
Adam Moore
21,956 PointsI'm not sure what key it would be for you, but it's right above my tab key and just to the left of the 1 key.
Michael Suchy
8,118 PointsLet me try it again.
<section>
<img src="img/nick.jpg" alt="Photo of Me" class="profile-photo">
<h3>About</h3>
<p>Hi. This is the website that I designed.</p>
</section>
Michael Suchy
8,118 PointsIt's weird. The code looks ok, but they photo does not show.
Michael Suchy
8,118 PointsOk. Thanks. I will take a look. Thanks for your help.
Aaron Baldwin
8,336 PointsSame problem here. It shows up fine when I use Chrome but not at all in Firefox 29.0.1. I think this is just a browser issue.