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!

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

Challenge task 5 of 5: Give the image a maximum width of 150 pixels and a border radius of 100%. Why my answer is wrong?

My answer for this task was:

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

What is wrong? I always receive this alert: Bummer! Did you set the max width to 150px?

Help please!

Steven Parker
Steven Parker
225,769 Points

A link to the challenge itself would be very helpful. There's no obvious problem in this CSS snippet.

4 Answers

Steven Parker
Steven Parker
225,769 Points

Now that I see the challenge, it's clear that there's more than one way to satisfy the requirements. But I believe this one meets them in the most precise way:

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

The selector "section img" works for the moment, but might break if other images (in the same or other sections) were added later. Just "img" doesn't work because there are already other images on the page that would be affected.

Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,497 Points

Im guessing they want .profile-photo:

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

I don't think so because I received an OK from the previous tasks which asked me about the other properties. But thanks for the help!

Here is the link for the challenge: https://teamtreehouse.com/library/make-an-about-page

I got it! This is the right answer.

section img{ display: block; margin: 0 auto 30px; max-width: 150px; border-radius: 100%; }

But I think I found a bug because I received an OK from the previous tasks using:

img{ display: block; margin: 0 auto 30px; }

Thank you all!!!!