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

Cristian Brownlee
Cristian Brownlee
8,061 Points

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%;
}
Cristian Brownlee
Cristian Brownlee
8,061 Points

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

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

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

Cristian Brownlee
Cristian Brownlee
8,061 Points

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

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

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.

Cristian Brownlee
Cristian Brownlee
8,061 Points

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!

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Don't worry it can happen!

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

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

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%; 
}
Cristian Brownlee
Cristian Brownlee
8,061 Points

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

Cristian Brownlee
Cristian Brownlee
8,061 Points

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

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

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.

Cristian Brownlee
Cristian Brownlee
8,061 Points

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.

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

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!

Cristian Brownlee
Cristian Brownlee
8,061 Points

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!