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

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

David Dong
David Dong
5,593 Points

about.html Page Has White Space On Top

/************************************
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%
}

.cursive {
  font-family: Cursive;
  font-weight: normal;
}

h3 {
  margin: 0 0 1em 0;
}



/************************************
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-size: 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: 30px;
  height: 30px;
  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;
}



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

.profile-photo {
  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.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: #559a68;
}

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

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

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

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

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

/************************************
ADD-ONS
*************************************/

h6 {
  line-height: 6px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>David Dong</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://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">
  </head> 

  <body>    
    <header>
      <a href="index.html" id="logo">
        <h1>David Dong</h1>
        <h2>Master Photographer</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/WIN_20160624_21_29_09_Pro.jpg" alt"Profile Photograph of David Dong" class="profile-photo">
        <h4 class="cursive">Day 5 - Dear Diary:<br>Jumping into a portal with my USB Weapon!</h4>
        <h3>About Me</h3>
        <p>In my free time, I enjoy biking, playing piano, reading, and playing videogames in my free time. I'm also learning to program and create websites, games, and many more cool nerdy things.<br>I found this amazing website called <a href="http://referrals.trhou.se/ddong" target="_blank">Teamtreehouse</a> that teaches you coding. That's actually where I learned how to make this website!</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="https://twitter.com/daviddongiowa">@daviddongiowa</a>.<br>If you'd like to follow me on Facebook...don't. It's horrible. It'll put you in GRAVE danger!</p>
      </section>

      <footer>
        <a href="https://twitter.com/daviddongiowa"><img src="img/twitter-wrap.png" alt="Twitter" class="social-icon"></a>
        <a href="https://www.facebook.com/david.dong.18007"><img src="img/facebook-wrap.png" alt="Facebook" class="social-icon"></a>
        <p>&copy; 2016 David Dong.</p>
        <p>Not-Actual-Disclaimer-Disclaimer-Thing: Using a good camera is "Master Photography", to me.</p>
      </footer>

    </div>

  </body>
</html>

^ The above is my main.css stylesheet and my about.html stylesheet. ^

You'll probably only need to use whatever is in the 'ABOUT' comment, but just in case, I added the whole thing.

I've been noticing that there was some white space above the about.html page. I remember there was a video about how to remove this that I followed, but I might not have saved it... Right above the navigation and the "logo", there is a bit of white space, and I don't know how to get rid of it. In Nick's video, there isn't any white space. I tried comparing my code to his code, but they looked pretty much the same. Is there a way to fix this?

I need some way to clarify this, and I wish I could send out the portfolio, but there are some of mine and my sister's pictures on there, and I don't want anybody I don't know seeing them. If there is a way to send out the site privately, please let me know.

Thanks in advance! :)

7 Answers

Steven Parker
Steven Parker
231,007 Points

Ahh... it all becomes clear now.

:point_right: This is a case of "margin collapse".

Since your header is floated, it doesn't count as having a height. So even though its text may push other text down, it doesn't separate the wrapper from the top of the body. And since nothing separates the wrapper from the section from the h4, the h4's margin is extending above the body!

Anything intervening, including a clearance will prevent this. So I recommend adding this to your #wrapper rule:

  clear: both;

You can remove that margin setting for the body, it's already done in your normalize.css.

And you might want to reduce the resolution of those thumbnail images, they take forever to load!

David Dong
David Dong
5,593 Points

Oh god... you saw the pictures XD

Steven, what you said makes sense except, when I did what you said about 0 top-margin...it DID fix the problem in my browser. Why would that be?

Steven Parker
Steven Parker
231,007 Points

It fixed it for me also, before I had the entire workspace. Before that, we only had one of the three CSS files.

Yes, there are specific ways to fix that. I don't have them memorized. Usually I try adding top padding to the header, or maybe any elements inside the header. I like to try one at a time and remove the tries that don't do what I want. You can also try 0 top margin on the header or elements inside the header

oh yea, and like Steven said, 0 margin to the body. Hi Steve, didn't see you there :D

Steven Parker
Steven Parker
231,007 Points

You and Jennifer and I might need to work out some sort of mutex.   :stuck_out_tongue_winking_eye:

Steven Parker
Steven Parker
231,007 Points

Try adding this to your body rule:

margin-top: 0;

That fixed it on my browser. But if you use a different one, your browser defaults might add margins to other elements as well.

UPDATE: Now that I see that you have a normalize.css, you don't need this.

David Dong
David Dong
5,593 Points

Aww, none of them work. I guess I'll go back to the videos. Thanks for your help, though!

I'll take a closer look but, if you find what it was...I'd love to know.

Steven Parker
Steven Parker
231,007 Points

It might help if you can replicate the problem in a workspace, using substitute images of similar size. Then make a snapshot of your workspace and post the link to it here.

Also mention your browser and version.

I added this: margin-top: 0; in the body rule. Seemed to fix it in my browser

body {
  font-family: 'Open Sans', sans-serif;
  margin-top: 0;
}

*tags steve"You're it!". And yes, body{margin-top:0;} is exactly what you said. I hadn't tried any of them myself. But when I did copy the code and view it in my browser, your's is the one that worked. Although I specifically in a vague sort of way (if that's possible) remember Guill adding "any amount of padding" to fix a similar problem.

Steven Parker
Steven Parker
231,007 Points

That's what I suggested the first time.   :stuck_out_tongue_winking_eye:

David Dong
David Dong
5,593 Points

My Chrome version is up to date. Here is my Workspace link: (https://w.trhou.se/ikphrq4efo) Please don't share it with other people!

David Dong
David Dong
5,593 Points

OMG THANK YOU SO MUCH\

Steven Parker
Steven Parker
231,007 Points

Remember to choose a "best answer" to mark your question complete.