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

Amy Jones
Amy Jones
1,454 Points
Posted by Amy Jones
Amy Jones
1,454 Points

Can't figure out why my CSS is not affecting the profile photo; have checked and re-checked code, not finding the error.

about.html snippet is:

<section> <img src="img/nick.jpg" alt "Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Nick Pettit, this is my design portfolio.</p> <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/nickrp">@nickrp</a>.</p> </section>

CSS snippet is:

.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

I can see the photo, it's just not registering the CSS. I saw there was a bug listed, so I tried adding the "clear: both;" to see if it would fit it, but I didn't see any difference.

Appreciate the help! Amy

8 Answers

Clinton Hopgood
Clinton Hopgood
7,825 Points
Clinton Hopgood
Clinton Hopgood
7,825 Points

You're missing an = from the alt attribute of the img. Fix this up and you should be fine.

Clinton Hopgood
Clinton Hopgood
7,825 Points
Clinton Hopgood
Clinton Hopgood
7,825 Points

This is the correct code:

margin: auto; will center the img.

HTML

      <section>
        <img src="img/gratt.png" alt="photo" class="profile-photo">
        <p>some text</p>
      </section>

CSS: 

img {
  max-width: 100%;
  display: block;
  margin: auto;
  margin-bottom: 30px;
  max-width: 150px;
  border-radius: 100%;
}
Amy Jones
Amy Jones
1,454 Points
Amy Jones
Amy Jones
1,454 Points

So, I think I've fixed this. In subsequent lessons, during the CSS validation, using http://jigsaw.w3.org/css-validator/#validate_by_input it pointed out an error. It found that I was missing a semi-colon after my "margin-bottom: 30px" Could have sworn I had it before, but when I added it, it fixed the photo formatting issue. Thanks!

Matthew Harvey
Matthew Harvey
1,307 Points
Matthew Harvey
Matthew Harvey
1,307 Points

Thanks Amy for that info! I had a double semicolon on font-weight: normal; on my h2 which the validation caught. After removing that, the about section lined up perfectly with the profile photo class info displaying correctly.

Amy Jones
Amy Jones
1,454 Points
Amy Jones
Amy Jones
1,454 Points

Good catch, Clinton--thanks very much. Unfortunately, it didn't resolve my CSS issue. Still not picking up the styling, I'm afraid.

Amy Jones
Amy Jones
1,454 Points
Amy Jones
Amy Jones
1,454 Points

Thanks again for your response, Clinton. I'm afraid I still haven't been able to make it work. Also, if I use "img" instead of ".profile-photo" wouldn't the CSS apply to all images? In the video, I believe he was using ".profile-photo" which is what I'm trying to make work. Oddly, I was able to do it in the code challenge correctly, but am still not getting it with the CSS that I have in my workspace. I'm stumped.

Amy Jones
Amy Jones
1,454 Points
Amy Jones
Amy Jones
1,454 Points

As I'm progressing through the next lessons, I'm getting the sense that I'm having the same issue with class styling across the board. I'm not sure why, as I was able to do it earlier this afternoon. I'm going to email support as well.

Keith Schreiner
Keith Schreiner
1,233 Points
Keith Schreiner
Keith Schreiner
1,233 Points

I am having the same issues. Used my own picture and followed exactly what Nick said but my image does not move and stays on the left side. Tried all the possible fixes from above. Nothing worked. Anyone else have an idea? My code looks exactly like Amy's except i do have the = after alt.

Kyle Hammer
Kyle Hammer
2,947 Points
Kyle Hammer
Kyle Hammer
2,947 Points

I had the same issue just now. I solved it by using an "id" instead of "class". Didn't change any other part of my code, just instead of "class=profile-photo", I used "id=profile-photo" and also updated my CSS to be "#profile-photo".