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 Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

Can't get FB logo to shrink. The original size of the logo was 57px x 57px.

Can't get my facebook logo in the footer to resize.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Aldrich|Antic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <title>Decibal Repo</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Decibal Repo</h1>
        <h2>An Electronic Music Collection</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Main Repo</a></li>
          <li><a href="newreleases.html">New Releases</a></li>
          <li><a href="previews.html">Previews</a></li>
          <li><a href="about.html">About</a></li>
        </ul>
      </nav>
    </header>
      <div id="gallery_contain">
        <section>
          <ul id="gallery">
            <li>
              <a href="img/one.jpg">
                <img src="img/one.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/two.jpg">
                <img src="img/two.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/three.jpg">
                <img src="img/three.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/four.jpg">
                <img src="img/four.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/five.jpg">
                <img src="img/five.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
          </ul>
        </section>
      </div>
      <footer>
          <a href="http://facebook.com/hi"><img src="img/FB-f-Logo__blue_57.png" alt=''></a>
          <p>&copy; Benjamin Hedgepeth 2016.</p>
    </footer>
  </body>
</html>
}

img {
  max-width: 100%;

div#gallery_contain {
  width: 850px;
  margin: 0 auto;
  padding: 0 5%;
  background-color: #1a75ff;
  }

ul#gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul#gallery li {
  float: left;
  width: 45%;
  padding: 2.5%;
  background-color: #b3ffff;
  color: #ffff99;
}

footer {
  clear: both;
  text-align: center;
}

a#fb_link {
    height: 20px;
    width: 20px;  
}

6 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Benjamin,

From a quick glance it looks like you have a missing closing bracket at the top of your styles. That could be throwing the rest off.

Try changing these lines:

img {
  max-width: 100%;

div#gallery_contain {

to

img {
  max-width: 100%;
} /* This is the missing closing bracket*/

div#gallery_contain {

For the Facebook anchor I notice you're using an ID of a#fb_link but you haven't set this in your html. Try changing:

          <a href="http://facebook.com/hi"><img src="img/FB-f-Logo__blue_57.png" alt=''></a>

to:

          <a id="fb_link" href="http://facebook.com/hi"><img src="img/FB-f-Logo__blue_57.png" alt=''></a>

Let me know if that helps :)

-Rich

EDIT:

If that doesn't work you could also try changing:

a#fb_link {
  height: 20px;
  width: 20px;
}

to:

a#fb_link {
  display: block;
  height: 20px;
  width: 20px;
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

If you're going to go in this direction then display: inline-block would be a better choice if more social links were added and you wanted them on the same line.

Ran ShemTov
Ran ShemTov
14,148 Points
Ran ShemTov
Ran ShemTov
14,148 Points

another way to tackle this:

footer > a > img {
 height: 20px;
 width: 20px;
}

adressing the image which is a direct child of an <a> tag inside the footer. If there's only the facebook image there, that's pretty specific for your case

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The image is inside a link though. You'd need to use a descendant selector.

Ran ShemTov
Ran ShemTov
14,148 Points
Ran ShemTov
Ran ShemTov
14,148 Points

that's right, my bad

edeharrison
seal-mask
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points
edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Benjamin,

A couple of problems there.

1) You're missing your closing bracket after img in your CSS. That may be causing an issue. Also, it's good set it's height to auto, so that the correct proportions are kept.

2) In your CSS, you're targeting this

a#fb_link {
  //your styles
}

However, you haven't assigned the ID of fb_link to the a tag in your HTML, so this won't take effect as it stands.

Hope that helps,

Ede

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points
Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

The descendant selector method works. However in this video he uses a class to style the icon:

https://teamtreehouse.com/library/how-to-make-a-website/styling-web-pages-and-navigation/polish-the-navigation-and-footer

Please check my HTML and CSS again for any mistakes as I am attempt this via a ID attribute. Please note that I realize that the descendant selector for the icon is in my CSS. I want to work out the ID selector nevertheless.

img {
  max-width: 100%;
}

div#gallery_contain {
  max-width: 850px;
  height: auto;
  margin: 0 auto;
  padding: 2.5%;
  background-color: #1a75ff;
  }

ul#gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul#gallery li {
  float: left;
  width: 40%;
  padding: 2.5%;
  margin: 2.5%;
  background-color: #b3ffff;
  color: #ffff99;
  text-align: center;
}

footer {
  clear: both;
  text-align: center;
}

a#fb_link {
  height: 20px;
  width: 20px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Aldrich|Antic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <title>Decibal Repo</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Decibal Repo</h1>
        <h2>An Electronic Music Collection</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Main Repo</a></li>
          <li><a href="newreleases.html">New Releases</a></li>
          <li><a href="previews.html">Previews</a></li>
          <li><a href="about.html">About</a></li>
        </ul>
      </nav>
    </header>
      <div id="gallery_contain">
        <section>
          <ul id="gallery">
            <li>
              <a href="img/one.jpg">
                <img src="img/one.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/two.jpg">
                <img src="img/two.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/three.jpg">
                <img src="img/three.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/four.jpg">
                <img src="img/four.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
            <li>
              <a href="img/five.jpg">
                <img src="img/five.jpg" alt="">
                <p>Description</p>
              </a>
            </li>
          </ul>
        </section>
      </div>
      <footer>
          <a id="fb_link" href="http://facebook.com/hi"><img src="img/FB-f-Logo__blue_57.png" alt=''></a>
          <p>&copy; Benjamin Hedgepeth 2016.</p>
    </footer>
  </body>
</html>
Rich Bagley
Rich Bagley
25,869 Points

Hi Benjamin,

I can see you've added the ID to the HTML but removed it from your CSS.

Your original question contained the following:

a#fb_link {
    height: 20px;
    width: 20px;  
}

Add that to the bottom of your styles and you should be sorted :)

My original answer above has more details though.

-Rich

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

In the video the class was applied to the img element. You're applying the id to the link which you can't set the width on unless you change the display value.

You can apply width to images by default but not links.

If you apply the id to the image then it should work out like the video.

Technically, you don't need to set the height. It will automatically maintain proportions when you set the width.

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

I thought I applied the ID to the 'img' originally. Below was my html for the icon. Having followed the sequence of markup as the video I was not getting the result as the video. Practically identical except for the selector. My initial HTML: 

<a href="http://facebook.com/hi"><img src="img/FB-f-Logo__blue_57.png" alt="" id="fb_link"></a>

HTML in video

<a href="http://facebook.com/nickrp"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Yes, that would be fine. Your original html that you posted did not contain that id.

If your css is 

#fb_link {
width: 20px;
}

then it should work exactly the same as video.

You can't use a#fb_link like you had in your original css that you posted because it's not the link that has that id.

a #fb_link with a space between would work but not necessary.

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points
Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

I made the correction in my CSS and is reflected both in my editor and markdown cheatsheet. The logo stays in its default size.

Rich Bagley
Rich Bagley
25,869 Points

Try changing:

a#fb_link {
  height: 20px;
  width: 20px;
}

to:

a#fb_link {
  display: block;
  height: 20px;
  width: 20px;
}

Any difference?

-Rich

Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points
Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

Yes that works now. Thank you.

Rich Bagley
Rich Bagley
25,869 Points

No problem, I've updated my original answer if you're able to select that as the Best Answer.

-Rich