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
Scooter D
9,611 PointsChallenge 5/5 Give the image a max width of 150px and border radius 100%
I believe this challenge is bugged.
Here is my solution:
``` img { display: block; margin: 0 auto 30px; max-width: 150px; border-radius: 100%; }
If anyone has a solution or suggestion I would appreciate it, thanks!
5 Answers
Shawn Gregory
Courses Plus Student 40,672 PointsHello,
I did the challenge again and got it to work. What I don't see in your code is the max-width: 100% before the display: block. I believe the code challenge is looking for that piece of information. I used what's below and it works for me.
img {
max-width: 100%;
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
Like I said, the challenge is probably programmed to need that max-width: 100% for it to be correct. Try it.
Cheers!
Ace Motanya
31,756 PointsI thought there was a bug on this challenge too. You just have to make sure you are putting the new code at the bottom of your stylesheet. I was adding directly at the top not taking into account it is a cascading stylesheet.
justindelamerced
3,032 PointsI had the same issue. I checked my code below and I found that there was img {max-width of 100%;}
I deleted this line and I used the above code and it worked.
Lou Miranda
12,201 PointsThank you. Your tip worked for me!
Ary de Oliveira
28,298 Pointsa { text-decoration: none; }
wrapper {
max-width: 940px; margin: 0 auto; }
logo {
text-align: center; margin: 0; }
h1, h2 { color: #fff; }
nav a { color: #fff; }
nav a:hover { color: #32673f; }
h1 { font-family: ‘Changa One’, sans-serif; font-size: 1.75em; font-weight: normal; }
img { max-width: 100%; display: block; margin: 0 auto 30px; max-width: 150px; border-radius: 100%; }
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
img { margin:30px 0 30px 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
Ary de Oliveira
28,298 Pointsa { text-decoration: none; }
wrapper {
max-width: 940px; margin: 0 auto; }
logo {
text-align: center; margin: 0; }
h1, h2 { color: #fff; }
nav a { color: #fff; }
nav a:hover { color: #32673f; }
h1 { font-family: ‘Changa One’, sans-serif; font-size: 1.75em; font-weight: normal; }
img { max-width: 100%; display: block; margin: 0 auto 30px; max-width: 150px; border-radius: 100%; }
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
img { margin:30px 0 30px 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }