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 trialAaron HARPT
19,845 PointsCode challenge problem
They keep telling me that the max-width property on the img property in my css is wrong. Any help would be appreciated.
<!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 photograph" class="profile-photo">
<p>My name is Aaron.</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;
}
img {
display: block;
margin: auto;
margin-bottom: 30px;
max-width: 150px;
border-radius: 100%;
}
#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;
}
3 Answers
Jessica Barnett
8,028 PointsYou have 2 blocks of code selecting the img tag.
There's your block
img {
display: block;
margin: auto;
margin-bottom: 30px;
max-width: 150px;
border-radius: 100%;
}
And if you look further down, there's this block too
img {
max-width: 100%;
}
So, your rule sets max-width to 150px, but then the 2nd rule sets the max-width again, to 100%.
Generally, styles that are towards the bottom of your stylesheet will override any rules at are higher up. That's what's meant by "cascading" style sheets. Check out this css-tricks post for more info.
There are a couple ways to fix it:
You could just move your block of code to the bottom of the stylesheet. That way, your code would override the other style. You could also remove the 2nd img rule entirely...
But what if there are other images on the page that DO need to be set to max-width: 100%? We only need to change the profile-image, not every image on the page.
So in this case, it's probably best to use the class selector instead of the img tag. That way all your images will still have their max-width: 100%, and you can still style your profile image as you like.
.profile-image {
display: block;
margin: auto;
margin-bottom: 30px;
max-width: 150px;
border-radius: 100%;
}
I hope that helps!
Kelly von Borstel
28,880 PointsI can't find anything wrong with your code. But I'm posting what worked for me anyway. It's almost identical... The only difference I notice is that I left max-width at the top. But really, that shouldn't matter.
img {
max-width: 150px;
display: block;
margin: auto;
margin-bottom: 30px;
border-radius: 100%;
}
Sean T. Unwin
28,690 PointsYeah, I can't see anything wrong either.
I used the following and it passed:
section img {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
Sean T. Unwin
28,690 PointsOh, I see now...
You have img
declared twice with the second one, about 1/2 way down, with a solo max-width
set (no other properties). This value is also incorrect as for what was asked for. That's probably why.