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 trialWinter Trabex
2,071 PointsI've done it right, but it won't let me advance.
It wants me to me use css to make an image have a max width of 150 pixels. I wrote the following code:
img {
max-width: 150px;
}
This should be right. At least, I think it is? But the website says I'm getting it 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="A Picture of Howitzer Gratt." class="profile-photo">
<p>This is me taking a test on teamtreehouse.com.
</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 {
display: block;
margin: 0 0 30px 0;
max-width: 150px;
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;
}
1 Answer
luke hammer
25,513 PointsLooks like you are blowing away your setting of
img {
display: block;
margin: 0 0 30px 0;
max-width: 150px;
border-radius: 100%;
with the setting of
img {
max-width: 100%;
Winter Trabex
2,071 PointsWinter Trabex
2,071 PointsThere's another challenge later in the lesson that works just fine. My guess is the code is looking for the wrong answer.
Winter Trabex
2,071 PointsWinter Trabex
2,071 PointsOkay, thank you! I didn't know that it would keep what I had put in from previous exercises. I thought it generated a new page of code to work in each time. Lesson learned. :)