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 trialJohnathan Wenske
3,410 PointsThe About Page
For some reason my paragraph and h3 are do not have the padding around it like your's does in the video. I'm not sure where I went wrong in the coding. I'll keep checking but if you have any suggestions on where to look that would be helpful!
Thanks, Johnathan
3 Answers
Marcin Robert Kaźmierczak
33,570 PointsPlease paste some code for this or link to te challenge :)
Johnathan Wenske
3,410 PointsI FIGURED IT OUT! I didn't have 'px' next to my padding number under the wrapper id tag in the CSS. Sorry to pile all that on you but thank you for helping!
Marcin Robert Kaźmierczak
33,570 PointsDon't use coma to separate margin values :)
Johnathan Wenske
3,410 PointsJohnathan Wenske
3,410 PointsFrom the HTML:
<body> <header> <a href="index.html" id="logo"> <h1>Johnathan Wenske</h1> <h2>Art Director</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="Image/nick.jpg" alt="Nick Profile Photo" class="profile-photo"> <h3>About</h3> <p>This is the spot to talk about myself and tell everyone what a wonderful person I am. </p> <p>If would like to follow me on twitter, you may do so here: <a href="https://twitter.com/JohnathanWenske">@JohnathanWenske</a></p> </section> <footer> <a href="https://twitter.com/JohnathanWenske"><img src="Image/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="https://www.facebook.com/johnathan.wenske"><img src="Image/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Johnathan Wenske. All Rights Reserved.</p> </footer> </div> </body>
Johnathan Wenske
3,410 PointsJohnathan Wenske
3,410 PointsFrom the CSS:
/********************************** GENERAL STYLING **********************************/
body { font-family: 'Open Sans', sans-serif; }
wrapper {
}
a { text-decoration: none; }
img { max-width:100%; }
/********************************** HEADING **********************************/
header { margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
h1 { font-family:'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
logo {
}
/********************************** NAVIGATION **********************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/********************************** FOOTER **********************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/********************************** Page portfolio **********************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }
/********************************** COLORS **********************************/
/* site body */ body { background-color: #fff; color: #999; }
/* links */ a{ color: #6ab47b; }
/* Green Header */ header { background: #6ab47b; border-color: #599a68; }
/* Logo Text */ h1, h2 { color: #ffffff; }
/* Nave Background on MOBILE DEVICES */ nav{ background: #599a68; }
/* Color for Nav Link */ nav a, nav a:visited { color: white; }
/* Selected nav link */ nav a.selected, nav a:hover{ color: #32673f; }
/****************************** ABOUT PAGE ******************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
h3 { margin: 0 0 1em, 0; }