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

Watch Video

Posted October 14, 2015 12:25pm by

the 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

October 14, 2015 12:26pm

@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 } }

4 Answers

October 14, 2015 1:11pm

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

October 14, 2015 1:12pm

<!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>&copy; 2015 Skyler Moon</p>
</footer>
  </div>

</body> </html>

October 14, 2015 1:12pm

<!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>&copy; 2015 Skyler Moon</p>
</footer>
  </div>

</body> </html>

October 14, 2015 1:13pm

<!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>&copy; 2015 Skyler Moon</p>
</footer>
  </div>

</body> </html>

October 14, 2015 1:13pm

a { 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; }

October 14, 2015 1:14pm

@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; }

}

October 14, 2015 1:47pm

So 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">

October 14, 2015 1:50pm

This 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

October 14, 2015 1:30pm

I 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.

October 14, 2015 1:36pm

im confused thats all of my code that I have on the workspaces I selected it all and copy and pasted it

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Skyler Moon

Skyler Moon

the header is not responding right after the last break point

Skyler Moon

Skyler Moon

primary {

secondary {

gallery li {

gallery li:nth-child(4n) {

4 Answers

richardwheeler

richardwheeler

Skyler Moon

Skyler Moon

Skyler Moon

Skyler Moon

Skyler Moon

Skyler Moon

Skyler Moon

Skyler Moon

wrapper {

logo {

Home {

Home li {

Home li a p {

Skyler Moon

Skyler Moon

primary {

secondary {

gallery li {

gallery li:nth-child(4n) {

richardwheeler

richardwheeler

richardwheeler

richardwheeler

richardwheeler

richardwheeler

Skyler Moon

Skyler Moon