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 February 26, 2015 9:07pm by

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.

February 26, 2015 9:10pm

/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

February 26, 2015 9:11pm

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

February 26, 2015 9:17pm

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?

February 26, 2015 9:24pm

/**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');
}


'''''

February 26, 2015 9:24pm

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

February 26, 2015 9:22pm

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!

February 26, 2015 9:30pm

Should be up now. Thanks again for taking a look

February 26, 2015 9:40pm

Is your problem about @media query?

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

February 26, 2015 9:43pm

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 :(

February 26, 2015 9:48pm

,,,

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

February 27, 2015 12:55am

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.

February 27, 2015 1:00am

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

March 1, 2015 8:06pm

Thanks so much guys

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?

Jacob Finch

Jacob Finch

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

Jacob Finch

Jacob Finch

logo {

tuukka uosukainen

tuukka uosukainen

Jacob Finch

Jacob Finch

Jacob Finch

Jacob Finch

Jacob Finch

Jacob Finch

5 Answers

tuukka uosukainen

tuukka uosukainen

Jacob Finch

Jacob Finch

tuukka uosukainen

tuukka uosukainen

tuukka uosukainen

tuukka uosukainen

Jacob Finch

Jacob Finch

chunlingzhou

chunlingzhou

chunlingzhou

chunlingzhou

Jacob Finch

Jacob Finch