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 trial

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Alexander King
Alexander King
1,157 Points
Posted by Alexander King
Alexander King
1,157 Points

On my about page only, I get about 20px of white space between header and the top edge of the browser

It's a small problem but it's driving me crazy. I've looked at the code very closely and can't figure out where the error is; if someone could point it out to me I would appreciate it greatly.

The header on my contact and index pages is right up against the top edge of the browser window, just like in the video, but on my about page there is approximately 20px of margin between the header and the top edge of the browser window (Firefox).

I've carefully typed along with the course using sublime text, looked at it all carefully, and compared my code with the downloaded code for this lesson, to no avail. Kudos to you if you can figure it out!

here's the code from my about page and both CSS pages:

<!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:400,400italic,700,700italic,800' 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>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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Nick Pettit! This is my design portfolio where I share all my favorite work. When I'm not desgining things, I enjoy exercising, playing video games, drinking good coffee, and more.</p> <p>If you'd like to follow me on twitter, my user name is <a href="http://twitter.com/nickrp">@nickrp</a>.</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>

here's the code from my main.css:

/****************************** GENERAL ******************************/ body { font-family: 'Open Sans' , sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

/****************************** HEADING ******************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center;
margin: 0;

}

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0px; 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; }

/****************************** 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.5em;
color: #bdc3c7;

}

/****************************** PAGE: ABOUT ******************************/

.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/****************************** PAGE: 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.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

/****************************** COLORS ******************************/

/* site body */ body { background-color: #fff; color: #999; }

/* green header */ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile devices */ nav { background: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* nav links */ nav a, nav a:visited { color: #fff; }

/* selected nav links */ nav a.selected, nav a:hover { color: #32673f; }

and here's the code from my responsive.css:

@media screen and (min-width: 480px) {

/******************************
TWO COLUMN LAYOUT
******************************/

#primary {
    width: 50%;
    float: left;
}

#secondary {
    width: 40%;
    float: right;
}   

/******************************
PAGE: PORTFOLIO
******************************/

#gallery li {
    width: 28.3333%;
}

#gallery li:nth-child(4n) {
    clear: left;
} 

/******************************
PAGE: ABOUT
******************************/

.profile-photo {
    float: left;
    margin: 0 5% 80px 0;

}

}

@media screen and (min-width: 660px) {

/******************************
PAGE: HEADER
******************************/
nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
}

#logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
}

header {
    border-bottom: 5px solid #599a68;
    margin-bottom: 60px;
}

}

Alexander King
Alexander King
1,157 Points
Alexander King
Alexander King
1,157 Points

when I comment out this declaration:

float: left;

in this rule:

.profile-photo { float: left; margin: 0 5% 80px 0; }

the problem goes away

Keith Greatz
Keith Greatz
4,377 Points
Keith Greatz
Keith Greatz
4,377 Points

I have the same issue, I localised it to

.profile-photo { float; left}

When I take this out it works fine except that it doesn't float left, have you had any luck finding out why this occurs?

2 Answers

anthony crowell
PLUS
anthony crowell
Courses Plus Student 10,953 Points
anthony crowell
anthony crowell
Courses Plus Student 10,953 Points

Hi, I would load normalize.css before any other css links to set everything to zero.