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
Jorge Gonzalez
1,270 PointsError in max width?
I get this message
Bummer! Did you set the max width to 150px?
Yes I did:
img { max-width: 150px; display : block; margin: 0 auto 30px; border-radius: 100%; }
why is my code wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/gratt.png" alt="profile-photo" class="profile-photo">
<p> Prueba macuarra </p>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
img {
max-width: 150px;
display : block;
margin: 0 auto 30px;
border-radius: 100%;
}
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%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
3 Answers
Marcus Parsons
15,719 PointsHey Jorge,
In this Challenge, you should be targeting the image with a class of "profile-photo". When it says "select the image" it is referring to the image you added while in the challenge. Your selector should be ".profile-photo" instead of "img":
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
If you decide to keep your selector as "img", the "img" selector must appear after the "img" selector already existing in the stylesheet. Otherwise, the "max-width" property gets overwritten by the existing "img" selector.
Ron McCranie
7,837 PointsYou code looks ok but I don't see it in the css you pasted.
Marcus Parsons
15,719 PointsThe problem is that if you decide to use the "img" selector here, the new "img" selector has to come further down in the cascade than the existing "img" selector; otherwise, the "max-width" property gets overwritten and you get a "Bummer" message. If you use ".profile-photo" however, it can exist anywhere in the stylesheet.
Jorge Gonzalez
1,270 Pointsoh! I can see it now, thank you