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 How to Make a Website Adding Pages to a Website Make an About Page

Posted by Xander Taylor
Xander Taylor
12,390 Points

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

Xander Taylor
Xander Taylor
12,390 Points

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
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.

Xander Taylor
Xander Taylor
12,390 Points
Xander Taylor
Xander Taylor
12,390 Points

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
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
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%; }