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
Skyler Moon
12,670 Pointsthe header is not responding right after the last break point
the red header I have reverts to a thin red line and the titles don't change size just location
4 Answers
richardwheeler
8,332 PointsSkyler, It sounds like you may have some spacing issues or its not configured for the device screen size or web browser. Can you please post your whole code and I'll see if I can find the solution for you?
Skyler Moon
12,670 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Skyler Moon |Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Chango|Open+Sans:400,400italic,700,700italic,800' 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>Skyler Moon</h1> <h2>Junior</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Home</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="Home"></ul> <p>Gallery will go here</p> </section> <footer> <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> <img src="img/youtube icon pic.png" alt="youtube Logo" class="social-icon">
<p>© 2015 Skyler Moon</p>
</footer>
</div>
</body> </html>
Skyler Moon
12,670 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Skyler Moon |Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Chango|Open+Sans:400,400italic,700,700italic,800' 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>Skyler Moon</h1> <h2>Junior</h2> </a> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary">
</section>
<section id="secondary">
</section>
<footer>
<img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
<img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<img src="img/youtube icon pic.png" alt="youtube Logo" class="social-icon">
<p>© 2015 Skyler Moon</p>
</footer>
</div>
</body> </html>
Skyler Moon
12,670 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Skyler Moon |Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Chango|Open+Sans:400,400italic,700,700italic,800' 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>Skyler Moon</h1> <h2>Junior</h2> </a> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html"class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <p>informtion about me here</p> </section> <footer> <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> <img src="img/youtube icon pic.png" alt="youtube Logo" class="social-icon">
<p>© 2015 Skyler Moon</p>
</footer>
</div>
</body> </html>
Skyler Moon
12,670 Pointsa { text-decoration: none; }
body { font-family:'Open Sans', sans-serif; } img { max-width: 100%; }
wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
header {
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
logo {
text-align:center; margin: 0; }
h1 { font-family: 'Chango', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75; margin: -5px 0 0; font-weight: normal; }
nav { text-align:center; padding: 10px 0; margin: 20px 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; }
footer { font-size: 0.75em; text-align:center; clear: both; padding-top: 50px; color: #ccc; } .social-icon { width: 30px; height: 30px; margin: 0 5px; }
Home {
margin: 0; padding: 0; list-style: none; }
Home li {
float:left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
Home li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }
a { color: red; } header { background-color:red; border-color: black; } h1, h2 { color: black } nav a, nav a:visited { color:black; text-decoration:none; }
nav a.selected, nav a:hover { color: white; }
body{ font-family: margin:0; } ul, li{ list-style:none; margin:0; padding:0; } li a{ text-decoration:none; }
Skyler Moon
12,670 Points@media screen and (min-width: 480px) {
}
primary {
width: 50%; float: left; }
secondary {
width: 40%; float: right; }
gallery li {
width: 28.3333%; }
gallery li:nth-child(4n) {
clear: left; }
@media screen and (min-width: 660px) {
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: 0.825em; }
h2 { font-size: 0.825em; margin-bottom: 20px; } header { border-bottom: 5px solid darkred; margin-bottom: 60px; }
}
richardwheeler
8,332 PointsSo you don't have any links like this? These are used to link your CSS pages to each of your HTML page. Nothings going to work unless you do that.
<link rel="stylesheet" href="css/maincss.css">
richardwheeler
8,332 PointsThis is the tutorial that shows how to link HTML and CSS. https://teamtreehouse.com/library/how-to-make-a-website/creating-html-content/include-external-css
richardwheeler
8,332 PointsI won't be able to properly assist without the entire code; you've only posted starting with your header and if you please post your main CSS code properly I would be happy to continue assisting you as I need to ensure that all of your links are written properly as in this [example: <link rel="stylesheet" href="css/maincss.css">] If you're not willing to that your choice but I'd only be guessing and I won't guarantee a solution.
Skyler Moon
12,670 Pointsim confused thats all of my code that I have on the workspaces I selected it all and copy and pasted it
Skyler Moon
12,670 PointsSkyler Moon
12,670 Points@media screen and (min-width: 480px) {
}
primary {
width: 50%; float: left; }
secondary {
width: 40%; float: right; }
gallery li {
width: 28.3333%; }
gallery li:nth-child(4n) {
clear: left; } @media screen and (min-width: 660px) {
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: 0.825em; }
h2 { font-size: 0.825em; margin-bottom: 20px } }