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

Posted by Ayaz Sadiq
Ayaz Sadiq
Courses Plus Student 5,361 Points

My image in the about section is still square shaped. How can I make it circular in the Style New Page video?

Here is my code:

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

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

Josh Davis
Josh Davis
24,227 Points

Mind providing the HTML as well? Your code seems that it should render correctly.

3 Answers

Mark Truitt
Mark Truitt
17,230 Points
Mark Truitt
Mark Truitt
17,230 Points

Hi Ayaz,

Can you include the code for your image? or fork your workspace and link it here? This would make it easier to help you.

kofi amoussou
PLUS
kofi amoussou
Courses Plus Student 7,381 Points
kofi amoussou
kofi amoussou
Courses Plus Student 7,381 Points

add a border to it

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%;  border: 4px solid #000;}
Ayaz Sadiq
PLUS
Ayaz Sadiq
Courses Plus Student 5,361 Points
Ayaz Sadiq
Ayaz Sadiq
Courses Plus Student 5,361 Points

I figured out why my code didn't work Kofi, Mark, and Josh. I forgot to put the dash in the hyphenated word profile-photo in the HTML code. Here's how it looks like now:

<div id="wrapper"> <section> <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">

Josh Davis
Josh Davis
24,227 Points

Great Ayaz! I had a feeling it was an error in the HTML as your CSS appeared to render correctly when I tested it.