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

HTML How to Make a Website Adding Pages to a Website Style New Pages

Image not round in About page.

Hi all. Usually I find the mistake after a thorough look through but this time I'm stumped! It's probably obvious though.

<img src="img/Cristian.jpg" alt="Photograph of Cristian" class="profile-photo">

PAGE: ABOUT
*********************/

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

None of the css codes above have made an effect on the image. I can only imagine it's because of the class but I have no idea where I went wrong.

3 Answers

I find a workaround:

replace the .profile-photo class with this two classes:

main.css
.crop-image{
    height:150px;
    width:150px;
    position:relative;    
    border-radius:100%;
    overflow:hidden;
    margin: 0 auto;
}

.profile-photo{
    position:absolute;
    left:-50%; right:-50%; top:0;
    margin:auto;
    height:auto; width:100%;
}

in your about.html file surround your img tag with this div:

about.html
<div class="crop-image"><img src="img/Cristian.jpg" alt="Photograph of Cristian Brownlee" class="profile-photo"></div>

This is the workspace updated: http://w.trhou.se/ryn5nax63a

Thanks but still no change. Might it be because there is already an open div on line 24 in about.html?

Do you mean this tag div id=wrapper? It's closed right above the body tag at the end of the file.

If you fork the workspace posted in this answer all works properly.

No I see; I was being a total idiot. Instead of hitting refresh or f5, I was simply highlighting the url bar and hitting enter. Wasn't updating the changes at all. Thank you so much for your help!

Don't worry it can happen!

Glad that I help you! Happy coding! :tada:

Hi,

to get a round image you need border-radius: 50% not border-radius: 100%:

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

I've literally copied it like-for-like in Nick's video. On that note, changing it to 50% didn't do anything.

Could you fork your workspace?

Sure thing. What does that mean and how might I do that?

In your workspace, in the up right corner there's an icon that looks like a camera, click and take a snapshot, then post the link.

So it's line 26 on about.html and line 133 on main.css

From what I can see, besides the src and alt, it's identical to Nick's video.

Ok, if you see the Nick's image is squared. This allow to perfectly round the image via border-radius property.

Instead the proportions of your image are rectangular so by adding border-radius: 100% you can't get the same result.

You need your image squared.

note: download the project files to see the Nick's image!

Ahh I see so the code is fine but the image properties itself make these codes redundant? Rather than changing the image to a square, what would the codes be to make this rectangular image rounded?

Thanks so much so far!