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 trialOlivia Maison
2,327 Pointscan someone tell me where i made an error here?
it asked me to : "select the profile image and set it to be a block element"
so i put:
.profile-photo { display: block; } am i missing a word spacing etc
thank you
<!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 class="profile-photo" src="img/gratt.png" alt="A photo.">
<p>hi,my name is olivia blah blah blah</P>
.profile-photo {
display property: block;
}
</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
Mark Pryce
8,804 PointsIs seems you have included your .profile photo declaration in your html document, try moving it to your css instead and it should work :)
Happy coding.
Žiga Pregelj
18,126 PointsHi, you are not writing code in the right file. In about.html, you have HTML code and it is for words & text on your page, in main.css you have your CSS file which is made for styling and moving your text, paragraphs and other visual things of your page.
You need to add your styling syntax to main.css file like this:
.profile-photo {
display: block;
}
and remove it form your about.html file ;)
Anthony Stapor
3,369 PointsHi, I did the challenge this way and it worked. Be sure to add the code at the end of your CSS file.
.profile-photo {
display: block;
}
Olivia Maison
2,327 PointsOlivia Maison
2,327 Pointsthank you!