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
Lauren Adkisson
1,585 PointsHeader 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;
}
.png "header problem")
<!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>© 2014 Lauren Adkisson.</p>
</footer>
</div>
</body>
</html>
6 Answers
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi 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
1,585 PointsIts 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
Treehouse Moderator 91,253 PointsWould 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
1,585 Pointsok there it is
Jonathan Grieve
Treehouse Moderator 91,253 PointsOkay. 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
1,585 PointsI tried Ctrl+J and it took me to downloads
Jonathan Grieve
Treehouse Moderator 91,253 PointsHi 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
1,585 PointsI 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
2,152 PointsIf 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?