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
Alex Weinberg
2,726 PointsI'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>
Robyn Cantrell
7,603 PointsAlex, 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
2,726 PointsYea, 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; }
wuworkshop
3,429 PointsYou'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
8,287 PointsAlex,
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
2,726 PointsThank you!! I was racking my brain, and that is the simplest thing I forgot. Much appreciated.
Annie Reaney
920 PointsThis just happened to me....so obvious, I was missing the hyphen in html.....doh.
wuworkshop
3,429 Pointswuworkshop
3,429 PointsDo 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.