Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Header problems

Hi, I have problems with my header when changing screen resolutions, the border switches places and my "title" (for Nick it is "designer") has totally disappeared.

/**************************************
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: 'Poiret One', open sans;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2{
  font-size: 0.75em;
  margin: -5px 0 15;
  font-weight: normal;
}

/**************************************
Navigation
**************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20 px 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;
}
/**************************************
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: .825px;
  margin-bottom: 20px;
}

header {
  border-bottom: 5px solid #631aab;
  margin-bottom: 60px;
}

alt text

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lauren Adkisson | Mama </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Poiret+One|Open+Sans:400,700,700italic,400italic&subset=latin,latin-ext' 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>Lauren Adkisson</h1>
        <h2>Mama</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt"">
              <p>Matias.</p>
            </a>
          </li>
           <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt"">
              <p>Matias. </p>
            </a>
          </li>
           <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt"">
              <p>matias. </p>
            </a>
          </li>
           <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt"">
              <p>Matias. </p>
            </a>
          </li>
           <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt"">
              <p>Matias. </p>
            </a>
          </li>      
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/lorenaadkisson"><img src="img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a>
        <a href="http://facebook.com/lauren.adkisson"><img src="img/facebook-wrap.png"alt="Facebook Logo"class="social-icon"></a>
        <p>&copy; 2014 Lauren Adkisson.</p>
      </footer>
      </div>
  </body>
</html>

6 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,028 Points

Hi Lauren,

It look like you've got 2 stray closing curly-braces for your style rooms in the Page: header section of your styles. Try removing these first to see if it makes any difference. :-)

Its still the same. My border, the darker green color, is taking up about half the header space and comes up to about the middle of my name at the top. I would post a screenshot but I can't figure out how

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,028 Points

Would you be able to post your HTML code to the forum? I think what's happening is as the width of the browser decreases it's pushing your content back which is increasing the size of the header itself.

ok there it is

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,028 Points

Okay. It looks like you've come further through the course than I thought. It's been a while since I did this one. :) But I see the responsive.css file in your project.

It's a bit hard to guess without seeing it in action but my thought is that the margins in your heading, h1 and h2 are interacting with each other and pushing the text below another element.

Do you use Google Chrome? Chrome has DevTools to look at individual elements and help you debug code. The first thing I would do is to use Ctrl+J to get into DevTools and watch the element that's disappearing and see what can be done to fix it so it doesn't go. :-)

I tried Ctrl+J and it took me to downloads

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,028 Points

Hi Lauren, I'm really sorry... it was Ctrl+Shift+J :-)

Then once in have a look at the elements panel and a look at the elements on your page.

I can't figure it out for the life of me, I tried dev tools and clicked on it, it is the h2 in the header, the mobile version works just fine and my title which is "mama" shows up , but on the bigger versions it doesn't work and there is just a little dash where the title should be.

Miranda Williams
Miranda Williams
2,152 Points

If it works in the mobile version, I would think it probably has something to do with the code in responsive.css. I just finished this project a week or two ago. Would you mind posting the code from responsive.css and I'll compare it to my code that I have saved from that project?