Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Adding Pages to a Website Make an About Page

Won't let me pass!

on task 5 of 5 it says to set image maximum width to 150px and border radius to 100%.

This code:

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

won't pass :(

Am I doing something wrong or is it a glitch?

4 Answers

I tired that too:

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

didn't pass either

James Barnett
James Barnett
39,199 Points

That code works fine assuming you add it below the existing img rule so it doesn't reset the max-width.

Finally resolved it by adding the class to the image (so CSS called for img.profile-photo).

Shouldn't have been necessary but oh well!

Thank you for the help.

James Barnett
James Barnett
39,199 Points

In the original CSS you are given to start the code challenge on lines 33-35 there's this:

img {
  max-width: 100%;
}

So if you put your CSS before line 34 it will be reset by this rule due to the way the cascading works in CSS.

> resolved it by adding the class to the image (so CSS called for img.profile-photo)

This works because you raised the specificity of your rule by adding a class.

Misty Majewski
Misty Majewski
5,276 Points

It is set up to see the max-width: 100% first..........

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