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
melissa brown
4,670 Pointssocial icons not resizing
my social icons are not changing size. they also have a weblink next to them that doesnt appear in the demo
alt="facebook logo" class="social-icon">
CSS code
/* ************************************ 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%; }
/* ************************************ 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: 'Special Elite', 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; }
navl ul{ list-style: none; margin: 0 10px; padding: 0; }
nav li{ display:inline-block; }
nav a{ font-weight: 800; padding: 14px 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 5%; }
/* ************************************ PAGE PORFIOLIO ***************************************/
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; }
/* ************************************ COLOURS ***************************************/
/* 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; }
/* links */ a { color: #6ab47b; }
/* nav link*/ nav a, nav a: visited { color: #fff; } /* selected nav link*/ nav a.selected, nav a:hover { color: #32673f; }
html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Melissa Brown | Designer </title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Melissa Brown</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="image/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>experimentation with colour and texture</p>
</a>
</li>
<li>
<a href="image/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>test 2</p>
</a>
</li>
<li>
<a href="image/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>playing with blends in photoshop</p>
</a>
</li>
<li>
<a href="image/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>trying to create sth</p>
</a>
</li>
<li>
<a href="image/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>creating shapes using reptition</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http//twitter.com/nickrp"><img src="img/twitter-wrap.png"> alt="twitter logo" class="social-icon"></a>
<a href="http//facebook.com/nickpettit"><img src="img/facebook.png"> alt="facebook logo" class="social-icon"></a>
<p>© 2014 Melissa Brown.</p>
</footer>
</div>
</body>
</html>
5 Answers
Alex Heil
53,547 Pointshey melissa brown , let's have a closer look at your current footer, then we'll see what causes the issue ;)
<a href="http//twitter.com/nickrp"><img src="img/twitter-wrap.png"> alt="twitter logo" class="social-icon"></a>
the problematic part is inside the img call. you currently close the img right after the source twitter-wrap.png"> so that the alt and class declarations don't apply to the image. in fact they're now treated as text and that's also why you see this text next to the icons. if you remove the closing > and only use the one you've already set at the end of the line correctly social-icon"> then it should work fine. this also applies to the second line for the facebook image ;)
in full the fixed footer would look like this then:
<footer>
<a href="http//twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
<a href="http//facebook.com/nickpettit"><img src="img/facebook.png" alt="facebook logo" class="social-icon"></a>
<p>© 2014 Melissa Brown.</p>
hope that helps and have a nice day ;)
Kathryn Notson
25,941 PointsHi, Krishna.
I left out the hyphen in class="social-icon" in my <a> anchor element.
You should refresh your page every time after you save your code.
I noticed you didn't capitalize alt="Facebook Logo" or alt="Twitter Logo". Capitalize them & see if that works.
You also have errors in the <p> paragraph captions for the images. You repeated one of them & left out another caption. You also have a letter capitalized that shouldn't be capitalized & one caption isn't capitalized at the beginning. Be careful when using quotation marks. Use either the single quotation mark or the double quotation marks throughout your code. Consistency is important, & not just for visual purposes.
Hope this helps.
Craig Watson
27,930 PointsHi Melissa,
Just a small error in your HTML, them image element is not correctly formatted. You have the "alt" and "class" outside the image element.
Correct Syntax Would Be:
<a href="http//facebook.com/nickpettit"><img scr="http://YOURLINK.com" alt="my link" class="social-link"></a>
Your Current:
<a href="http//facebook.com/nickpettit"><img src="img/facebook.png"> alt="facebook logo" class="social-icon"></a>
hope this helps Craig
Kathryn Notson
25,941 PointsThanks Craig! It works now.
Craig Watson
27,930 PointsNo problem Kathryn!
Krishna Thorlin
1,326 Pointsi have the same problem as the two others. I have checked my code multiple times but cant find any mistake :(
'''html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>medievid</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Lato|Istok+Web: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>Krishna Thorlin</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>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>PLaying with blending modes in photoshop.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>trying to create a 80's styles of glows.</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//twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a> <a href="http//facebook.com/nickpettit"><img src="img/facebook.png" alt="facebook logo" class="social-icon"></a> <p>© medievid.</p> </footer> </div> </body> </html> '''
'''css /*************************** 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; }
'''
melissa brown
4,670 Pointshi krishna,
i checked your code and its the same as mine and i have no problems resizing. delete your browsing history including caches i have to do this sometimes to get changes to work, especially if you are using chrome
Kathryn Notson
25,941 PointsKathryn Notson
25,941 PointsI have the identical issue. My Twitter & Facebook icons don't change size, either. Here's my index.html coding:
<footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social icon"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social icon"></a> <p>© 2014 Kathryn Notson.</p> </footer>
Here's my main.css coding:
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
I noticed you didn't include the colon after "http://..." Nick Petitt used the colon in his video.
Craig Watson
27,930 PointsCraig Watson
27,930 PointsHi Kathryn,
Your class is like this -- class="social icon"
and your css selector is like this -- .social-icon
drop a dash in the class name and you should be good to go!!
Craig :)