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 trialJimmy Names
10,371 PointsBummer! issue
Tasked with setting maximum width to 150px and radius to 100%..
written: img { display: block; margin: 0 auto 30px; max-width: 150px; border-radius: 100%; }
Keep getting issue with max-width.. can't see issue here could someone help???
<!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="f" class="profile-photo" />
<p>me</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>
.profile-picture {
max-width: 150px;
}
img {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
a {
text-decoration: none;
}
#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;
}
4 Answers
bothxp
16,510 PointsHi Jimmy,
Your answer of:
img {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
would work and will pass the task.
What's catching you out is the cascading nature of Cascading Style Sheets. If you look further down your main.css file you'll spot that there was already a
img {
max-width: 100%;
}
rule in the file. So you are setting max-width: 150px; in the rule that you created but then later on that is getting superseded by the already existing max-width: 100% rule.
So you could of added your answers to the tasks to the pre-existing img rule or you just need to remove it.
But ...... I think the best way to approach the answer is to use something like...
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
Hope that helps.
Jimmy Names
10,371 PointsYeh it does, thanks man!
Curtis Murley
2,766 PointsI usually don't add an answer until I can actually catch the problem you're running into. This is my answer and worked just fine
.profile-photo {
display: block;
margin: relative;
margin-bottom: 30px;
max-width: 150px;
border-radius: 100%;
}
Jacob Mishkin
23,118 PointsYou are very close on this one, in the margin selector, you need to create a margin-bottom selector, as of now it is not registering the style because you have the value after the word auto which ends the statement.
margin: 0 auto;
margin-bottom: 30px;
change it to this and you should be good to go.
Jacob Mishkin
23,118 PointsI stand corrected, The code provided passed the challenge as well, I do apologize for misleading you. Bothxp is correct.
Jimmy Names
10,371 Pointscheers guys, so why couldn't I write my margin selector on one line? seems so stupid of treehouse..
Jacob Mishkin
23,118 PointsIt's because what you wrote is invalid syntax. When using a keyword such as auto, it ends the value statement due to using the first value give and applied to all sides of the HTML selector. Margin 0 auto, centers a div horizontally, What you wrote minus the auto is margin top and bottom of 0px and left and right margin of 30px. if you want to set each margin side you can write it like so:
margin: 15px 25px 15px 25px;
I hope this helps.
Jimmy Names
10,371 PointsJimmy Names
10,371 Pointsedit: added the class selector to see fi that would help but didn't//.