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

Alex Weinberg
Alex Weinberg
2,726 Points

I'm trying to resize the social media icons on the footer and it's not working. They look the same after reloading.

The only thing I've done intentionally different than the course is use an instagram icon and link instead of the twitter one. Any ideas where I've gone wrong? Thanks.

Here is my 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%; }

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

/********************************** Colors **********************************/

/* site body */ 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; }

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

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

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

and here is my index file: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Alex Weinberg | Designer</title> <link rel="stylesheet" href="css/normalize 2.css"> <link href='http://fonts.googleapis.com/css?family=Neuton:400,800,400italic|Changa+One:400,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Alex Weinberg</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 in photoshop.</p> </a>
</li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's 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 brushes.</p> </a>
</li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a>
</li>
</ul> </section> <footer> <a href="http://instagram.com/freshtrackmusic/"><img src="img/Instagramwrap.png" alt="Instagram logo" class="social-icon"></a> <a href="https://www.facebook.com/alexwnbrg"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>© 2014 Alex Weinberg</p> </footer> </div> </body>

</html>

Do you have this in a Workspace? Could you provide the preview link so we can see what the page looks like? The top-right icon that looks like an eye takes you to the preview page.

Alex, Can you add your css code for social icon. Mine from the course is:

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

Hope this helps! Robyn

5 Answers

Alex Weinberg
Alex Weinberg
2,726 Points

Yea, here's the preview link, http://port-80-bj56a239eu.treehouse-app.com

and here's the css code: social-icon{ width: 20px; height: 20px; margin: 0 5px; }

You're missing the period in your css code to target the .social-icon class. So it should be:

.social-icon{
  width: 20px;
  height: 20px;
  margin: 0 5px;
}
Ben Dietrich
Ben Dietrich
8,287 Points

Alex,

A couple of things I noticed....

  • First, make sure your IG src reference syntax is accurate. Should there be a hyphen between instagram and wrap? Make sure it exactly matches the file location.
  • Second, is there a leading period prior to the social-icon selector? It could be just that you pasted your code plaintext but I don't see it.

Try those two and let me know what it looks like. Also, use the following format when adding css...

*Code Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

Alex Weinberg
Alex Weinberg
2,726 Points

Thank you!! I was racking my brain, and that is the simplest thing I forgot. Much appreciated.

Annie Reaney
Annie Reaney
920 Points

This just happened to me....so obvious, I was missing the hyphen in html.....doh.