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 trialRicardo Narciso
751 Pointsmax-width?
Hi everyone.
I am missing something here:
<section> <img src="img/gratt.png" alt="This is a description" class="profile-photo" style="display:block" vspace="30px" max-width="150px" border="100%"> <p> This is a paragraph </p> </section>
This is on the html code. What is wrong with the, max-width="150px" ??
Thanks.
<!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 a description" class="profile-photo" style="display:block" vspace="30px" max-width="150px" border="100%">
<p> This is a paragraph </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;
}
#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
Lee Chavers
22,506 PointsIf you're doing inline styles you need to set your max-width inside the style part. Example:
<img src="img/gratt.png" alt="This is a description" class="profile-photo" style="display: block; max-width: 150px; padding: 30px 0; border: 100%;">
Also, I don't think that border = 100% is valid syntax.
Colin Marshall
32,861 PointsAdding on to what Lee said, you should be doing all of your CSS in the external CSS file. The only times you want to use inline CSS styles are when you have no other choice, like in an HTML email, for example. I suggest you watch the video over again so you can see how Nick adds the styles to the external CSS file.
Ricardo Narciso
751 PointsThank you guys! Actually I´m following the Tracks challenges in order and this one just gave me the option to work on the html file and not on the CSS file, which I also find odd.
Colin Marshall
32,861 PointsThat is strange. If you try loading it again is there no tab for the CSS file in this challenge? There should be a tab for about.html and one for css/main.css.
Lee Chavers
22,506 PointsLee Chavers
22,506 PointsAlso, I cleaned up some of the other depreciated html you had in that tag and put it in the appropriate style tag.