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

Matthew Lehman
Matthew Lehman
5,282 Points
Posted by Matthew Lehman
Matthew Lehman
5,282 Points

My CSS did not validate, its showing 3 errors. May i have my code checked to see what I am doing wrong?

/********************** GENERAL ***********************/

body { font-family: 'Open sans,' 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: 'Changa One', 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.75em; 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 { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/********************** 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: #599a68; }

/* nav background on mobile */ nav { border-color: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* nav background on mobile */ nav { background: #599a68; }

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

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

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

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Please review the Markdown Cheatsheet for how to format code quotes.

/********************** GENERAL ***********************/

body { 
  font-family: 'Open sans,' 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: 'Changa One', 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.75em; 
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 { 
clear: both; 
display: block; 
max-width: 150px; 
margin: 0 auto 30px; 
border-radius: 100%; }

/********************** 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: #599a68; }

/* nav background on mobile */ 
nav { border-color: #599a68; }

/* logo text */ 
h1, h2 { color: #fff; }

/* links */ 
a { color: #6ab47b; }

/* nav background on mobile */ 
nav { background: #599a68; }

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

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

/* site body */ 
body { background-color: #fff; color: #999;
Chris Bennett
Chris Bennett
7,499 Points

Did it specify what the errors were?

5 Answers

Shane Meikle
Shane Meikle
13,188 Points
Shane Meikle
Shane Meikle
13,188 Points

First issue: Change

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

to

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

Notice the change of position of the comma.

Second issue:

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

Change to 

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

Not seeing a third at the moment

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Thanks.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I don't see anything wrong, but there are some odd features. What is saying you have errors?

This is odd: gallery li a p. I cannot tell you it is wrong, though. Also, I suggest putting the color scheme first so that you don't overrule other colors by accident.

Matthew Lehman
Matthew Lehman
5,282 Points
Matthew Lehman
Matthew Lehman
5,282 Points

thank you for replying back to me ted, but I did end up finding the errors.

they were '' problems using those symbols.

But thank you for helping me out.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

can you elaborate where the errors were so I can see what they were? I didn't see them when I formatted your code.

Marcus Parsons
Marcus Parsons
15,719 Points

The syntax highlighting that Ted did isn't picking up everything not because of anything he did but just because you have to notice how Github Flavored Markdown works on this site. The # sign, when prepended to a line, causes that line to become a header level format. If you notice, all of the gallery selectors (and wrapper and logo) are huge and bold, because of the # sign that you can't see that was turned into Markdown. Anytime you see raw CSS data posted and some selectors are bold and huge, these are id selectors that were turned into markdown.

i.e. this:

#gallery {}

becomes this:

gallery {}

A single # sign is the same as h1 and you can put up to 5 hash signs for an h5 like this:

h5

This is why it is important to put your code into blocks as seen in the Markdown Cheatsheet.

Matthew Lehman
Matthew Lehman
5,282 Points
Matthew Lehman
Matthew Lehman
5,282 Points

/********************** GENERAL ***********************/

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

Before hand I had

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

I just put this mark: '

before the comma instead of after and that seemed to do the trick

Matthew Lehman
Matthew Lehman
5,282 Points
Matthew Lehman
Matthew Lehman
5,282 Points

thank you Shane.

I did end up finding the errors and it seemed like it did the trick.

Thanks for replying back to me

Shane Meikle
Shane Meikle
13,188 Points
Shane Meikle
Shane Meikle
13,188 Points

No problem :)

Just out of curiosity, what was the third error? I couldn't find it in the couple passes I did.

Matthew Lehman
Matthew Lehman
5,282 Points
Matthew Lehman
Matthew Lehman
5,282 Points

it was my mistake it ended up being 2 errors.

my fingers hit a letter on my keyboard while I was scrolling down, so I just fixed that myself.

the other thing is my hover still doesnt seem to be working.

changing it to: (as you planned it)

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

made it cause more errors. and i rechecked the video and nick wanted to be the original one that I had:

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

doing that didn't cause any errors but my site still doesn't have my hover feature working