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

Debby Ling
Debby Ling
1,398 Points

Parts of my main.css are not detected properly. Please help!

In my css file, all elements EXCEPT those under the 'General' heading (i.e body, #wrapper) are suddenly not detectable. I was following the tutorial and did not do anything to the css file; only added a new contact.html file.

Here's my index.html

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8">
  <title>Debby | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
<body> 
    <header>
      <a href="index.html" id="logo">
      <h1>Debby Ling</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>
          <a href="IMG/numbers-01.jpg">
            <img src="IMG/numbers-01.jpg" alt="">
            <p>Experimentation with color and texture</p>
          </a>
        </li>
        <li>
          <a href="IMG/numbers-02.jpg">
            <img src="IMG/numbers-02.jpg" alt="">
            <p>Playing with blending modes</p>
          </a>
        </li>
        <li>
          <a href="IMG/numbers-06.jpg">
            <img src="IMG/numbers-06.jpg" alt="">
            <p>Trying to create 80s style</p>
          </a>
        </li>
        <li>
          <a href="IMG/numbers-09.jpg">
            <img src="IMG/numbers-09.jpg" alt="">
            <p>Drips creaeatedd</p>
          </a>
        </li>
        <li>
          <a href="IMG/numbers-12.jpg">
            <img src="IMG/numbers-12.jpg" alt="">
            <p>Repeation</p>
          </a>
        </li>
      </ul>
    </section>
    <footer>
      <a href="http://twitter.com"><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>&copy; 2014 Debby Ling.</p>
    </footer>
  </div>
</body>
</html>

Here's my main.css

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


/*******************
HEADER
********************/

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;
}


/*******************
NAV
********************/


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

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

nav li {
  display: inline-block;
}

/*******************
FOOTER
********************/

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

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

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

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

/*******************
ABOUT
********************/

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

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


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

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

nav {
  background-color:#599a68;
}

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


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


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

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

8 Answers

Michael Bates
Michael Bates
13,344 Points

Give this a shot!!

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

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

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

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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}
Debby Ling
Debby Ling
1,398 Points

That worked! Thank you so much!

Even for an amateur, that was a really silly mistake on my part. Can't thank you enough :)))) Have a good day/night ahead!

Michael Bates
Michael Bates
13,344 Points

You are very welcome! I have been getting used to using Dev Tools and Debug consoles within browsers. They have helped immensely to find any errors in my code.

Michael Bates
Michael Bates
13,344 Points

Would you mind putting a code snippet on here? That might help us find a solution

Michael Bates
Michael Bates
13,344 Points

Otherwise, my guess is that there is an error in the code involving linking the files together

Debby Ling
Debby Ling
1,398 Points

Hi there, I think you're right in that there's an error linking the files together. What's funny is only parts of my css file is not detected. For example, h3 would be displayed fine but h1 and h2 are not.

Would you like to see the main.css code?

Thanks so much!

Michael Bates
Michael Bates
13,344 Points

Of course! It will help us figure out what the problem is

Debby Ling
Debby Ling
1,398 Points

Just added the index.html and main.css. Pls do take a look when you have the time. Thanks!

Michael Bates
Michael Bates
13,344 Points

do you have the normalize.css and responsive.css files present and placed within the css folder on Workspaces?

Debby Ling
Debby Ling
1,398 Points

I have main.css and normalize.css located within my css folder on workspace. Sorry, I'm an utter newbie and I haven't learnt about responsive.css yet.

Michael Bates
Michael Bates
13,344 Points

no worries! I wasn't sure how far you have gotten, which shouldn't make a difference at this point

Michael Bates
Michael Bates
13,344 Points

and do you have the 'img' folder typed out in all caps like in your syntax?

Debby Ling
Debby Ling
1,398 Points

Yup! Whenever I referenced to IMG I used all caps. What's funny is if you look at my css file, all the elements under the GENERAL comment heading are all working fine (i.e body, #wrapper), only those of other comment headings like HEADER are acting up.

Thank you SO MUCH for your help!

Michael Bates
Michael Bates
13,344 Points

You are quite welcome! I fixed the the syntax to read 'img' and previewed it and had no issues. Hopefully everything is running fine now!

Debby Ling
Debby Ling
1,398 Points

Thanks for the suggestion! I tried to change everything to 'img' instead of 'IMG'. Unfortunately, stuff like the green header and the floating element for images are still not showing up nicely :(

Michael Bates
Michael Bates
13,344 Points

There are some syntax issues from what I have noticed:

Missing some white space after ' : ' in a few declarations and after some commas There are some missing ' ; ' as well