MOVE project - whitespace on top of page


#1



https://www.codecademy.com/en/courses/web-ext/projects/html-css-prj_move

Hi,
i do not have any errors pending.
But on the top of the page i have a white space i do not get rid of.

Please help!

Thanks!

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>

    <div class="main">
      <div class="container">
             <h1>Heading</h1>
        <p>A Paragraph</p>
        <a href="#" class="btn">Join here</a>
      </div>
    </div>
    
    <div class="supporting">
      <div class="container">
        <div class="col">
          <h2>Move</h2>
          <p>Become more active by tracking your runs, rides, and walks.</p>
        </div>
        <div class="col">
          <h2>Sync</h2>
          <p>Keep track of your training results here...</p>
        </div>
        <div class="col">
          <h2>Compete</h2>
          <p>Compare your results with athletes all over the world.</p>
        </div>

        <div class="clearfix"></div>
      </div>
    </div>


    <div class="feature">
      <div class="container">
          <h1>Heading</h1>
        <p>A Paragraph</p>
        <a href="#" class="btn">Learn more</a>  
      </div>
    </div>
    
    <div class="footer">
      <h1>Contact</h1>
      <p>Compare your results with athletes all over the world.</p>
      <a href="#" class="btn">Contact us</a>
    </div>

  </body>
</html>

html, body {
  margin: 0;
}

h1, h2, a {
  font-family: 'Oswald', sans-serif;
}

p {
  font-family: Helvetica, Arial, sans-serif; 
}



.container {
  width: 940px;
  margin: 0 auto;
}

/* Main */
.main {
  height: 600px;
  background-image:url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg);
}

.main h1 {
  text-align: center;
  font-size: 150px;
}

.main p {
  text-align: center;
  font-size: 30px;
}

.main .btn {
      border: 3px solid black;
      background-color: black;
      padding: 20px 40px;
      color: yellow;
      font-size: 30px;
      text-decoration: none; 
        display: inline-block;
}
/* Supporting */
.supporting {
  text-align: center;
  padding: 50px 0 80px;
  background-color: #1c1c1c;
}

.supporting .col {
  float: left;
  width: 28%;
  padding: 10px;
}

.supporting h1,
.supporting h2 {
  color: #ffa800;
  font-size: 20px;
  margin-bottom: 10px;
}

.clearfix {
  clear: both;
}

.supporting p {
  color: #efefef;
  margin-bottom: 20px;
  line-height: 20px;
  font-size: 12px;
}

.supporting .btn {
  background-color: #eee;
  color: #1c1c1c;
  font-size: 18px;
  padding: 8px 30px;
  text-decoration: none;
  display: inline-block;
}

/* Feature */
.feature {
  height: 600px;
  background-image:url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg);
}

.feature h1,
.feature h2 {
  color: #fff;
  font-size: 40px;
  margin: 0;
  padding:50px 0 0;
}

.feature .container h1 {
  color: black;
  font-size: 150px;
}

.feature .container p {
  color: black;
  font-size: 30px;
}

.feature .container .btn {
  border: 3px solid black;
  background-color: black;
  padding: 20px 40px;
  color: yellow;
  font-size: 30px;
  text-decoration: none; 
    display: inline-block;
}

/* Footer */
.footer {
  height: 600px;
  background-image:url(https://s3.amazonaws.com/codecademy-content/projects/move/footer.jpg);
}

.footer h1,
.footer h2 {
  color: black;
  font-size: 75px;
  margin: 0 0 20px 0;
  padding:50px 0 0;
}

.footer p {
  color: black;
  margin: 0 0 20px 0;
  font-size: 18px;
}
.footer .btn{
      border: 3px solid black;
      background-color: black;
      padding: 20px 40px;
      color: yellow;
      font-size: 30px;
      text-decoration: none; 
        display: inline-block;
}

@media (min-width:600px) {
  .main h1 {
    font-size: 200px;
  }

  .supporting .col {
    width: 30%;
  }

  .supporting h2 {
    font-size: 40px;
  }

  .supporting p {
    font-size: 14px;
  }

  .feature h2 {
    font-size: 60px;
  }
}


#2

Posting your CSS script could as well help.

Also note that the exercise link posted isn't correct. You could edit your post.

Thank you! :smile:


#3

The css comes right behind the html code.
unfortunately i have i no idea how i could have entered this request "better".
I sticked to the instruction on the screen when entering it.
If there is a procedure how to enter coder properly i would be glad to get a link.


#4

what you are dealing with here is collapsed margin:
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the
resulting combined margin is called a collapsed margin.

in my opinion the simplest solution is adding a very small padding to the container in main:

.main .container {
  padding-top: 0.01px;
}

oh, i might need to mention this, the gap was caused by the margin of h1 collapsing with the margin of .container.

You can read more about it collapsed margin


#5

Okay, that's fine. @stetim94 's answer should be well sufficient. I was going to suggest:

.main .container {
  padding-top: 0px;
}

but @stetim94 's code does makes sense.


#6

but a padding-top of 0 means there is no separation, meaning the collapsed margin won't go away


#7

Yup! I thought so that's why I thumbed-up your suggestion.


#8


main h1 {
margin:0px;
}

got rid of that nasty white space above for me.
(Though I still have no idea where the margin came from in the first place).


#11

headings and paragraphs have a margin by default? and the margin was collapsing causing the white space


#12

Thanks for this! I was having the same issue and was able to fix it using the same resolution that @megablaster90014 used. However, I'm still not entirely sure if I understand those "collapsed" margin's.

How understand it is that the margin of the h1 box caused the white space at the top of the page, but what isn't this just some sort of overlap of the box that it is placed ("container" in this case), causing that box to grow in order to accommodate the standard margin of the h1 tag?


#13

i would personally prefer the padding: 0.1px to .main, so the margin does not collapse but the h1 keeps it margin

You can read the technical explanation here, good luck, i am still trying to understand it as well


#14

This worked for me, while
.main .container {
padding-top: 0px;
}
did not.
Thank you.


#15

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.