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

Posted by Jennifer Hughes
Jennifer Hughes
2,083 Points

Why isn't the Facebook logo changing its size and becoming smaller? 

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
      <title> Jennifer Hughes | Writer </title>
     <link rel="stylesheet" href="css/normalize.css">
     <link href='http://fonts.googleapis.com/css?family=Kreon|Josefin+Slab:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
     <header>
       <a href="index.html" id="logo">
          <h1>Jennifer Hughes</h1>
          <h2>never, never, never give up</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/david.jpg">
              <img src="Img/david.jpg" alt="">
              <p>David learns to drive!</p>
             </a>
          </li>
         <li>
         <a href="Img/david1.jpg">
            <img src="Img/david1.jpg" alt="">
            <p>David discovers snow!</p>
           </a>
          </li>
           <li>
              <a href="Img/david2.jpg">
              <img src="Img/david2.jpg" alt="">
              <p>David makes his very own hat!</p>
             </a>
          </li>
           <li>
         <a href="Img/david3.jpg">
            <img src="Img/david3.jpg" alt="">
            <p>David talks on the telephone for the very first time.</p>
           </a>
          </li>
           <li>
         <a href="img/david4.jpg">
            <img src="Img/david4.jpg" alt="">
           <p>David tries kale.</p>
           </a>
          </li>
          </ul>
       </section>
        <footer>
          <a href="https://www.facebook.com/david.kuhns1"><img src="Img/facebook-wrap.png" alt="Facebook Logo"class="social- icon"></a>
          <p>&copy; 2014 Jennifer Hughes.</p>
          </footer>
       </div>
     </body>
  </html>

/**********
GENEARL
***********/

body {
  font-family: 'Josefin Slab', sans-serif;
}
#wrapper {
  max-width: 940px;
  margin:0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width:100%;
}  

/**********
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: 'Kreon', 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;
}

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


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

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

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

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

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

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

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

4 Answers

Sylinic .
Sylinic .
2,761 Points

Hey Jennifer, the class attribute on your facebook img tag doesn't match the CSS selector,

      <a href="https://www.facebook.com/david.kuhns1"><img src="Img/facebook-wrap.png" alt="Facebook Logo"class="social- icon"></a>

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

Just change the CSS class to .social- icon or vice versa. :)

Jennifer Hughes
Jennifer Hughes
2,083 Points
Jennifer Hughes
Jennifer Hughes
2,083 Points

Never mind, I figured it out.

Sylinic .
Sylinic .
2,761 Points

Haha, good job. Was away from my computer for a few hours.

Jennifer Hughes
Jennifer Hughes
2,083 Points
Jennifer Hughes
Jennifer Hughes
2,083 Points

Ahhh, oh my goodness, sometimes I wonder how I miss this things that seem so obvious. I think it's a weird phenomenon! Thank you.

Sylinic .
Sylinic .
2,761 Points

Not a problem, I do that all the time! ;p

Jennifer Hughes
Jennifer Hughes
2,083 Points
Jennifer Hughes
Jennifer Hughes
2,083 Points

Hi again,

It actually doesn't seem to be working again. As a reminder, I am trying to change the size of my Facebook logo. 

GENEARL
***********/

body {
  font-family: 'Josefin Slab', 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: 'Kreon', 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: 40px;
  height: 40px;
  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.75ems;
  color: #bdc3c7;
}



/**********
PAGE: ABOUT
***********/

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

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

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

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

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

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

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

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

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
      <title> Jennifer Hughes | Writer </title>
     <link rel="stylesheet" href="css/normalize.css">
     <link href='http://fonts.googleapis.com/css?family=Kreon|Josefin+Slab:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/main.css">
   </head>
   <body>
     <header>
       <a href="index.html" id="logo">
          <h1>Jennifer Hughes</h1>
          <h2>never, never, never give up</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/david.jpg">
              <img src="Img/david.jpg" alt="">
              <p>David learns to drive!</p>
             </a>
          </li>
         <li>
         <a href="Img/david1.jpg">
            <img src="Img/david1.jpg" alt="">
            <p>David discovers snow!</p>
           </a>
          </li>
           <li>
              <a href="Img/david2.jpg">
              <img src="Img/david2.jpg" alt="">
              <p>David makes his very own hat!</p>
             </a>
          </li>
           <li>
         <a href="Img/david3.jpg">
            <img src="Img/david3.jpg" alt="">
            <p>David talks on the telephone for the very first time.</p>
           </a>
          </li>
           <li>
         <a href="img/david4.jpg">
            <img src="Img/david4.jpg" alt="">
           <p>David tries kale.</p>
           </a>
          </li>
          </ul>
       </section>
        <footer>
          <a href="https://www.facebook.com/david.kuhns1"><img src="Img/facebook-wrap.png" alt="Facebook Logo"class="social- icon"></a>
          <p>&copy; 2014 Jennifer Hughes.</p>
          </footer>
       </div>
     </body>
  </html>