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 Website Testing

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;

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;

Did it specify what the errors were?

5 Answers

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

Thanks.

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

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.

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

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

/********************** 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

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

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

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