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

Simon Parker
PLUS
Simon Parker
Courses Plus Student 4,160 Points
Posted by Simon Parker
Simon Parker
Courses Plus Student 4,160 Points

Help troubleshooting white space above header on contact/about pages

I have noticed that white space has appeared above the header after completing this section to create the responsive.css page.

From previous work I thought this section of code in the main.css ensured that the white space on the header would vanish. Correct me if I am wrong.

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

Nothing else is obvious as to what would affect the header section although by deleting this code on my responsive.css in the about page section the white space vanishes on the about page. I have not figured out what is affecting the contact page.

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

Here is all my responsive.css in case that helps.

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

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

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

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


   /********************
 3 * 5 = 15
100% - 15% = 85%
85/3 = 28.33333333333
  ********************/


   /********************
 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) {

     /********************
 HEADER
  ********************/

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

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

  h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
  }

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

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

}
Rich Bagley
Rich Bagley
25,869 Points

Hi Simon,

Can you post your HTML code please and we'll take a look?

Thanks

-Rich

eck
eck
43,038 Points

Can we see your html too? It will help us pinpoint the problem.

Also, take a look at this thread. You might find your answer, or at least some helpful info.

5 Answers

Simon Parker
PLUS
Simon Parker
Courses Plus Student 4,160 Points
Simon Parker
Simon Parker
Courses Plus Student 4,160 Points

Thanks all for your help and suggestions. I have solved the problem. From Brents idea about developer tools in Chrome I remembered a Firefox addon (using Firefox atm) called Firebug which allows you to inspect elements on the page and see the html and css behind it.

I noticed the affected area was within my div wrapper where the main text/images of the pages were. As I examined my html I realise that the affected pages had <h3></h3> text that wasnt on the main page. From the info Erik linked to about I decided to add the following to my main.css.

h3 {
  margin: 0;
   }

I refreshed the page and the white space has gone.

It seems the h3 has some default formating that needed adjusting. Not sure why mine had it but in the tutorial videos there was none but I guess its one of those quirky things that just happen.

Thanks again all for your help.

eck
eck
43,038 Points

You are right, your h3 does have default styling that varies depending on the browser you are using. In fact, nearly all elements have some default styles set. In the case of h1 - h6, you will find that there are default margins.

Brent Cralley
Brent Cralley
18,541 Points
Brent Cralley
Brent Cralley
18,541 Points

How much white space are we talkin' about? I noticed in your first HTML clip it has 5px of padding to the top of the header, but I have a feeling you're talking about more white space than that....

If you are by any chance using Google Chrome to view your project, try opening up the Developer Tools under "Tools" in the top menu.

Click on the "Elements" tab on the far left, and in the box on the right, click on the "Computed" tab. This is a tool I use for debugging issues like this....

Hover over the HTML in your source code in the big box on the left, and you'll see it highlight on the page. When you hover over the one that highlights your white space (There could be more than one), check the tab on the right to see what it has for margins, borders, or padding on the top.

Hope this helps with future debugging!

Dave Irwin
Dave Irwin
1,143 Points
Dave Irwin
Dave Irwin
1,143 Points

I was having a similar situation; it seemed that when the first nested element in my section element was a block level, it put some extra space above my header. I don't know why... but I fixed it by adding a class to the first block level element (in my case it was h3) and then styling the class in the css for margin-top: 0.

There's probably a better way to do it, but this worked for me.

Anybody have any thoughts on why this space was happening to begin with? I'm following along with the PHP Development Track > How to Make a Website > Adding Pages to a Website and this happened when I added my contact page.

eck
eck
43,038 Points

Reading this article may give you a better idea of what is taking place.

Dave Irwin
Dave Irwin
1,143 Points
Dave Irwin
Dave Irwin
1,143 Points

Hey Erik, thanks, that was helpful. My solution worked, but I realized that the header was set to float:left, which somehow allowed any block elements to expand beyond it. When I turned off the float, it also eliminated the problem.

That being said, the layout seems to work fine without the float:left on the header, but I set it that way as I was following along with the lesson. I'm not sure if it will present any future problems with layout. Any thoughts on that?

James Lucia
James Lucia
7,350 Points
James Lucia
James Lucia
7,350 Points

You have a padding of 5px on the top of your header CSS there, changing padding to 0 might fix your issue.

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Simon, be sure you've saved your work, and refreshed the page. Your code seems okay — a few variations — but nothing to render the whitespace mentioned.

However, you may want to change this part to remove . before em.

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