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 Styling Web Pages and Navigation Polish the Navigation and Footer

Posted by Sanu Abraham
Sanu Abraham
514 Points

Can't reduce my size of my social link icons.

Whatever i try i still can't reduce the size of my social link icons like the way nick does. I can E-mail my index.html files and main.css files to those willing to help.

4 Answers

Sanu Abraham
Sanu Abraham
514 Points
Sanu Abraham
Sanu Abraham
514 Points

YES now both came out right THANK GOD! Can you help me now please? Frederico Graciano

Frederico Graciano
PLUS
Frederico Graciano
Courses Plus Student 2,768 Points
Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

You can post your codes here look below the textarea and above the Post Answer, there is a link there click on Markdown Cheatsheet and it ill open a popup window and then you can see how to add code to your post. then post it here and i'll help you.

Sanu Abraham
Sanu Abraham
514 Points
Sanu Abraham
Sanu Abraham
514 Points 
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf=8">
      <title>SANU ABRAHAM | DESIGNER </title>
      <link rel="stylesheet" href="css/normalize.css">
      <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/main.css">
  </head>
    <BODY>
        <header>
          <a href="index.html" id="logo">
            <h1>SANU ABRAHAM</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 Colors.</p>
                </a>
              </li>
              <li>
                <a href="img/numbers-02.jpg">
                    <img src="img/numbers-02.jpg" alt="">
                    <p> Playing With Blending Modes In Photoshop.</p>
                </a>
              </li>
              <li>
                <a href="img/numbers-06.jpg">
                    <img src="img/numbers-06.jpg" alt="">
                    <p> 80s Style Of Glows.</p>
                </a>
              </li>
              <li>
                <a href="img/numbers-09.jpg">
                    <img src="img/numbers-09.jpg" alt="">
                    <p>Drips Created Using Photoshop.</p>
                </a>
              </li>
              <li>
                <a href="img/numbers-12.jpg">
                    <img src="img/numbers-12.jpg" alt="">
                    <p> Creating Shapes.</p>
                </a>
              </li>
            </ul>
           </section>
            <footer>
                <a href="https://www.facebook.com/sanu.abraham.50"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-link"></a>
                  <p> &copy ; 2014 Sanu Abraham</p>
            </footer>
            </div>
     </BODY>
</html>    
    ```
Sanu Abraham
Sanu Abraham
514 Points
Sanu Abraham
Sanu Abraham
514 Points 
/***********
 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%;
}


  /******max-width:
 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-seriff;
  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-link {
  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;
}

  /***********
 COLORS
************/
/* BODY COLOR */
body {
  background-color:#fff;
    color:#999;
}

/* GREEN HEADER */
header {
  background:#6ab47b;
  border-color:#599a68;
}
  /* NAV BACKGROUND ON MOBILE DEVICES */
nav {
  background:#599a68;
}
/* LOGO TEXT */
h1,h2 {
 color:#fff;
}
/* LINKS */
a {
  color:#6ab47b;
}

/* NAV LINKS */
nav a,nav a:visited {
  color:#fff;
}
/* SELECTED NAV LINKS */
nav a.selected,nav a:hover {
  color:#326736;
}