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 trialAlexander Davison
65,469 PointsGive the image a maximum width of 150 pixels
What is wrong? I just find where is wrong... Someone help me out!
PS: I am on Task 5 of 5
Thanks in advance!
img {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
FULL CODE:
<!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" class="profile-photo" alt="profile-photo">
<p>Cake cake cake cake cake cake cake</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;
}
img {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
#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%;
}
#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;
}
2 Answers
Mitchell Fargher
11,634 PointsYou have img listed twice in your css.
The first had img with: max-width : 150px;
Then down lower you list img again with: max-width : 100%;
The second img tag is "cascading" over the first and causing your max-width to be 100% instead of the 150px.
Remove this second img and you should be good.
Rich Donnellan
Treehouse Moderator 27,696 PointsThe wording is a bit misleading. It's asking you to target the image with the class of .profile-photo
, not the img
tag itself.
Redeclare using the class and you should be all good!
Alexander Davison
65,469 PointsSorry but using the img tag as the selector works.
Rich Donnellan
Treehouse Moderator 27,696 PointsIt may "pass", but the intention isn't to set all images to that specific max-width
, full border-radius
, and margin
spacing, just the user profile picture.
Alexander Davison
65,469 PointsHmm... I see. Didn't know that.
Mitchell Fargher
11,634 PointsYes, typically you would want to use the class for best practice. The img tag works in this as it is the only img, but Rich is correct for normal use.
Alexander Davison
65,469 PointsAlexander Davison
65,469 PointsThank you so much!!!