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
Cristian Brownlee
8,061 PointsImage 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%;
}
3 Answers
Gianmarco Mazzoran
22,076 PointsI find a workaround:
replace the .profile-photo class with this two classes:
.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:
<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
8,061 PointsThanks but still no change. Might it be because there is already an open div on line 24 in about.html?
Gianmarco Mazzoran
22,076 PointsDo 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
8,061 PointsNo 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
22,076 PointsDon't worry it can happen!
Glad that I help you! Happy coding!
Gianmarco Mazzoran
22,076 PointsHi,
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
8,061 PointsI've literally copied it like-for-like in Nick's video. On that note, changing it to 50% didn't do anything.
Gianmarco Mazzoran
22,076 PointsCould you fork your workspace?
Cristian Brownlee
8,061 PointsSure thing. What does that mean and how might I do that?
Gianmarco Mazzoran
22,076 PointsIn 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
8,061 PointsGot it, thanks. https://w.trhou.se/kl211qsr5y
Cristian Brownlee
8,061 PointsSo 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
22,076 PointsOk, 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
8,061 PointsAhh 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!
Cristian Brownlee
8,061 PointsCristian Brownlee
8,061 PointsNone 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.