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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Jacob Finch
Jacob Finch
503 Points

adjusting my nav under @media (min-width: 660px) is making my desktop site go crazy

Instead of eliminating the dark green background and going to the green header, my nav background is replaced with white and my text goes white.

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

That code is surely fine so this problem has to be back in my main. If anyone could help that'd be great. I'm currently trying to debug through css lint but not finding the problem.

Jacob Finch
Jacob Finch
503 Points

/HEADING/

header { float: center; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family:'Changa One', sans-seriff; margin: 15px 0; font-size: 1.75em; font-weight: Normal; line-height: 0.8em;

}

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

/Navigation/ /Navigation/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav { background:#599a68; }

nav a, nav a:visited { color: #fff; }

nav a.selected, nav a:hover { color: #32673f }

nav ul { list-style: none; margin: 0 10px; padding: 0;

}

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

That's my header ad nav css

Could you please post all of your source code and a link to the code challenge?

Jacob Finch
Jacob Finch
503 Points

tuukka, this happened while following along in a video not a code challenge. What is the cleanest way to post all my code in this forum?

Jacob Finch
Jacob Finch
503 Points
/**General **/

body {
  font-family: 'Open Sans', sans-serif; 
}

a {
  text-decoration: none;
}

#wrapper {
 max-width: 940px;
 margin: 0 auto;
 padding: 0 5%; 
}

img { 
  max-width:100%;
}
/*HEADING*/ 

header { 
  float: center;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo { 
  text-align: center;
  margin: 0;
} 

h1 { 
  font-family:'Changa One', sans-seriff;
  margin: 15px 0;
  font-size: 1.75em; 
  font-weight: Normal; 
  line-height: 0.8em; 

} 

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

/*Navigation*/ 
/*Navigation*/ 

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0; 
}

nav { 
  background:#599a68; 
}

nav a, nav a:visited {
  color: #fff;
} 

nav a.selected, nav a:hover { 
  color: #32673f 
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;

}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}


/*Footer*/ 
/*Footer*/ 

footer {
  font-size:: 0.75em;
  text-align: center;
  clear: both; 
  padding-top: 50px; 
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/*HEADING*/ 
/*HEADING*/ 

a {
  color: #6ab47b;
}

header {
  background: #6ab47b;
  border-color: #599a68; 
}

h1 , h2 { 
  color: #fff; 
} 

/*Page Portfolio*/ 
/*Page Portfolio*/ 
/*Page Portfolio*/ 

#gallery {
  margin: 0;
  padding: 0;
  list-style: none; 
}

#gallery li {
  float: left; 
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7
}

#gallery li p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}
body {
  background-color: #fff;
  color: #999;  
}


/*PAGE:ABOUT*/
/*PAGE:ABOUT*/
/*PAGE:ABOUT*/

.profile-photo {
  float: center;
  display: block;
  max-width: 150px;
  margin:auto 30px;
  border-radius: 100%;
}

/*PAGE: CONTACT*/
/*PAGE: CONTACT*/
/*PAGE: CONTACT*/

.contact-info {

  list-style: none;
  padding: 0;
  margin: 0;
  font-size:0.9em;
}

.contact-info a{
  display:block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}


'''''
Jacob Finch
Jacob Finch
503 Points

,,,html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jacob Finch</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Changa+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id= logo> <h1>Jacob Finch</h1> <h2>Designer</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> <img src="img/numbers-01.jpg" alt=""> <p> Jawn Jawn The Jawn is Jawn</p> </li> <li> <img src="img/numbers-02.jpg" alt=""> </li> <li> <img src="img/numbers-06.jpg" alt=""> </li> </ul> </section> <footer> <a href="http://twitter.com/wahoolagon"><img src="img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a> <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="facebook Logo"class="social-icon"></a> <p>© 2014 Jacob Finch.</p>
</footer> </div> </body>
</html>

'''

5 Answers

Check out the Markdown Cheatsheet at the bottom of this page. I can't link it here. wrap your code inside three of these ```

Hope this helps!

Jacob Finch
Jacob Finch
503 Points

Should be up now. Thanks again for taking a look

Is your problem about @media query?

I don't see it in your code. Sorry for not getting your problem.

I tried your code in codepen and nothing strange seems to be going on. Nav bar stays dark green under the 660px. Weird. Sorry for not being able to help you :(

Jacob Finch
Jacob Finch
503 Points

,,,

@media screen and (min-width: 480px) {

/2 Column Layout/ /2 Column Layout/ /2 Column Layout/

#primary { width: 50%; float: left;

} #secondary { width: 40%; float: right; }

/2 PORTFOIO/ /2 PORTFOILIO/ /2 PORTFOLIO/

#gallery li { width:28.33333%; }

#gallery li:nth-child(4n) { clear:left; }

/*2 PORTFOIO*/ 

/2 ABOUT/ /2 ABOUT/

.profile-photo { float: left; margin: 0 5% 80px 0 }

} @media screen and (min-width: 660px) {

/2 ABOUT/

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

}
,,,

That's my media query. It's ok!

chunlingzhou
chunlingzhou
596 Points

Hi Jacob, I got the same problem as you did a little while ago. But then I re-checked my .html file, for the header part, I saw I commented out a line: 'float: left;' the reason I commented it out was probably bc I played around it when I was watching that part of video, by commenting out the line, I didn't see different result at all AT THAT MOMENT.

Just a few minutes ago, I tried to put back that line, so the code in .html file is like this: header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0;
width: 100%; /* w/o this, w float left, it would not occupy the entire page width */ }

And it fixed the problem(the same that you are mentioning in this discussion) I had before. Hope this helps.

chunlingzhou
chunlingzhou
596 Points

should be main.css file, not the .html file. sorry for wrongly mentioned the file involved.

Jacob Finch
Jacob Finch
503 Points

Thanks so much guys