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 trialJana Ramos
430 PointsSetting max-width to 150 pixels
I am setting max-width to 150 pixels and its saying 'bummer did you set the maximum width to 150 pixels? Whats wrong with my code? Cheers!
img { display: block; margin: 0 0 30px 0; max-width: 150px; border-radius: 100%;
}
<!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="This is an image" class="profile-photo">
<p>This is my about page</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 0 30px 0;
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;
}
7 Answers
Abe Layee
8,378 PointsYou're not selecting the right element which is .profile-photo in this case.
.profile-photo {
display: block;
margin: 0 0 30px 0;
max-width: 150px;
border-radius: 100%;
}
Dan Oswalt
23,438 PointsSelecting img should be fine! The issue is that farther down in your CSS you have img selected a second time, and it's running the max-width at 100% because it's farther down the cascade.
Rich Bagley
25,869 PointsHi Jana,
Just following on from what Abraham has mentioned, you'll need to change the order of you CSS too as otherwise your img
style will override the max-width, so:
img {
max-width: 100%;
}
would be followed by:
.profile-photo {
border-radius: 100%;
display: block;
margin: 0 auto 30px;
max-width: 150px;
}
As a side note, not sure if you're having trouble with the margin too, but you may need to change it to the above to allow for a centered image.
Hope that helps :)
-Rich
Marc Cortez
2,977 PointsYou assigned the max-width to "img". Instead you should assign it to ".profile-photo" :)
Andi Wilkinson
26,822 Pointsi concur - you have .img twice in the code, so the second 100% overrides the first one!
Jana Ramos
430 PointsHi all,
Thanks for you help!
I have amended code (changed to .profile-photo but I am still getting 'Bummer! Did you set the max width to 150px?
What I am doing...seems like it should be so simple but I am stuck :)
Thanks again! Jana
Jana Ramos
430 PointsAh..sorry. I fixed it now. Semi colon I had put a semi colon instead of a colon too!
Many thanks for your help with this!
Jana