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

Posted by Lauren Adkisson
Lauren Adkisson
1,585 Points

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,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 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. :-)

Lauren Adkisson
Lauren Adkisson
1,585 Points
Lauren Adkisson
Lauren Adkisson
1,585 Points

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,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 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.

Lauren Adkisson
Lauren Adkisson
1,585 Points
Lauren Adkisson
Lauren Adkisson
1,585 Points

ok there it is

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 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. :-)

Lauren Adkisson
Lauren Adkisson
1,585 Points
Lauren Adkisson
Lauren Adkisson
1,585 Points

I tried Ctrl+J and it took me to downloads

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 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.

Lauren Adkisson
Lauren Adkisson
1,585 Points
Lauren Adkisson
Lauren Adkisson
1,585 Points

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
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?