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

Posted by Filip Sucic
Filip Sucic
4,086 Points

I can't get the profile image rounded

I can't seem to get it right , tried Nick's photo aswell but it doesn't work. Been stuck on this for an hour. Not sure where I went wrong.

Code:

CSS:

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

HTML:

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

Jessica Murillo
Jessica Murillo
9,119 Points
Jessica Murillo
Jessica Murillo
9,119 Points

Are you linking the css page to your html? I forget to sometimes or my path is incorrect so it doesn't like correctly. I tried your code as well and it worked for me.

7 Answers

Liliana Brissos
Liliana Brissos
7,686 Points
Liliana Brissos
Liliana Brissos
7,686 Points

http://codepen.io/lilianab/pen/pbVmdP

It works for me, as you can see in the example above. Double check that your stylesheet is linked correctly :)

Abdelkarim Lyoussi
Abdelkarim Lyoussi
3,657 Points
Abdelkarim Lyoussi
Abdelkarim Lyoussi
3,657 Points

Me too, I think that your CSS file is not correctly linked to your html. So, check it out !

Adebayo Ojo
Adebayo Ojo
23,661 Points
Adebayo Ojo
Adebayo Ojo
23,661 Points

Are you also using a picture with white background? If so, you won't be able to see the effect of the rounded edge.

Jessica Murillo
Jessica Murillo
9,119 Points
Jessica Murillo
Jessica Murillo
9,119 Points

And you image needs to be square e.g. 400 X 400 for the image to be a round circle. An image of 500 X 700 is going to be oval shaped.

Timothy Emory
Timothy Emory
4,147 Points
Timothy Emory
Timothy Emory
4,147 Points

I think I figured it out. On my about.html I typed "profile photo". On the css I put ".profile-photo". When I changed the about.html to "profile-photo" it is now rounded. The "-" made it work. I thought I had tried that the first time but I guess I had not.

Timothy Emory
Timothy Emory
4,147 Points
Timothy Emory
Timothy Emory
4,147 Points

It's also not working for me, and I have the same code you have which is the same code in the video. My about.html is linked to the main.css because if I make css changes to the h3 they are visible. I'm wondering if it has something to do with the pixels of the pic you use? I know my pic was more than 400 X 400. Doesn't matter what % I select though I don't see any change to the pic.

Filip Sucic
Filip Sucic
4,086 Points
Filip Sucic
Filip Sucic
4,086 Points

Wow what a huge response thank you all , for some reason it just started working properly the next day. Strange... I didn't change anything