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

CSS How to Make a Website Responsive Web Design and Testing Website Testing

Greg Osborne
Greg Osborne
2,194 Points
Posted by Greg Osborne
Greg Osborne
2,194 Points

Colour issues with navigation after validating code

Hi there guys. After copy and pasting my code into the validation website (W3C) there seems to be some issues with with the colours on the nav bar. They are now green on the mobile site, and are not visible at all on the desktop site. It is probably something simple;( something a expert eye would spot.

Greg Osborne
Greg Osborne
2,194 Points
Greg Osborne
Greg Osborne
2,194 Points 
/**********************************
GENERAL 
***********************************/
body{
font-family: 'Nunito', sans-serif;

}

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

a{
 text-decoration:none;
}

img{

max-width:100%
}

h3 {
  margin: 0 0 1em 0;
}

/**********************************
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: 'Anonymous Pro',sans-serif;
   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
***********************************/

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
***********************************/
footer {
  font-size: 0.75px;
  text-align: center;
  clear:both;
  padding-top: 50px;
  color:#ccc;
}

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


/**********************************
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 a p{
  margin:0;
  padding: 5%;
  font-size: 0.75em;
  color:#bdc3c7

}


/**********************************
PAGE: ABOUT
***********************************/
.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 52%;
}


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


/**********************************
COLORS
***********************************/

/*site body*/
body{
background-color: #fff;
color:#999;
}


/*green header*/
header {

background: #6ab47b;
border-color:#577a66;
/*logo text*/
}


/*nave background on mobile*/
nav{
  background:#577a66;
}

/*logo text*/
h1, h2 {

color:#fff;
}

/*links*/
a {
color:#6ab57b;

}
/*nave background on mobile*/
nav{
background:#577a66;
}

/*nav link */ 
}
nav a, nav a:visited {
color: #fff;

/*seleted nav link color*/  
}
nav a.selected,nav a:hover {
color:#32673f;

3 Answers

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

Greg,

You didn't close out your last statement with a semicolon and you also have this:

/*nave background on mobile*/
nav{
background:#577a66;
}

/*nav link */ 
}

Which first off, is the second time you've defined nav>background and also there's an extra semicolon at the end there which is probably helping cause a problem. One more thing that isn't necessarily wrong, is that you didn't put a semicolon after the img>max-width line. This one is more for good practice on not forgetting semicolons. Hope this helps, I didn't actually test it out live but that's pretty much everything that's wrong. And for things being green, that background color is green so... That comment about it being the nav background on mobile, it'll be the nav background color on any viewport.

Hope this helps. Cheers. Sam Webb

Greg Osborne
Greg Osborne
2,194 Points
Greg Osborne
Greg Osborne
2,194 Points

Hi Samuel, thanks for the swift reply, much appreciated. Im not quite following the reply "You didn't close out your last statement with a semicolon" I can't see where to put the semi colon ;( this is probably so obvious, but Im still wet behind the ears when it comes to code!

What I meant by the background colour being green is when I pull the browser window down to the smallest size, the colour behind the navigation turns a different shade of green. When the browser window is pulled out to the max, the green changes to one shade.

Thanks :)

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

Sorry about that, what I meant was you needed an ending curly brace. Good thing you ended up getting it though.

Greg Osborne
Greg Osborne
2,194 Points
Greg Osborne
Greg Osborne
2,194 Points

I have figured it out Samuel, thanks again:)