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!
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 trial
sondreg
5,515 PointsHow to make a website - about page
I'm having trouble with the about page. Seems like there's some margin above the header that i can't get rid of. Gone through the code a dozens of times but cant find any error. No problem with the portfolio or contact page. I'm i missing something?
5 Answers
Mark Pryce
8,804 PointsI believe it is a collapsed margin that is causing it, it happens to a lot of people on the about page, you will learn about them later in your studies.
Try setting a padding-top value to your elements you will find the right one :)
Happy coding!
John Steer-Fowler
Courses Plus Student 11,734 PointsHi there,
Would you be able to post your code for this task?
Take a look at the 'Markdown Cheatsheet' for help on how to format code in the forum.
sondreg
5,515 PointsSeems like I had to add padding-top: 1px; to the #wrapper
Mark Pryce
8,804 PointsI did say it was one of your elements :P well done!
sondreg
5,515 PointsHere is my about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sondre Giæver</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,700,700italic|Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Sondre</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><p>
<img src="img/sondre.jpg" alt="Profile picture" class="profile-photo">
<h3>About me</h3>
</section>
<footer>
<a href=""><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href=""><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2016 Sondre Giæver.</p>
</footer>
</div>
</body>
</html>
</p>
main.css
/******************
GENERAL
******************/
body {
font-family: 'Open Sans' , sans-serif;
margin: 0;
background-color: #fff;
color: #999;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Sans Pro', 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;
}
/******************
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;
}
/******************
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;
}
/******************
Contact
******************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size:: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
.contact-info li.email a {
background-image: url('../img/mail.png');
}
/******************
About
******************/
.profile-photo {
border-radius: 100%;
max-width: 150px;
display: block;
margin: 0 auto 30px;
}
/******************
HEADING
******************/
/******************
COLORS
******************/
/*Green header*/
header {
background: #6ab47b;
border-color: #599a68;
}
h1, h2 {
color: #fff;
}
a {
color: #6ab47b;
}
/*Nav background on mobile devices*/
nav {
background: #599a68;
}
nav a, nav a:visited {
color: #fff;
}
nav a.selected, nav a:hover {
color: #32673f;
}
```
sondreg
5,515 Pointsif i set padding-top: 0; in the body nothing happens. but if i set padding-top: 1px; the space in the top is almost gone
Mark Pryce
8,804 PointsI don't know if you cover it in this project but try setting a box-sizing: border-box rule also target *
- { box-sizing: border-box; }
sondreg
5,515 Pointsbox-sizing doesnt seem to fix this either
Mark Pryce
8,804 PointsIt won't fix that but does help contain box model :)