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 trialHolly Ramage
312 PointsI have followed the instructions, why are my social icons not smaller?
I have checked that I have written correctly in CSS and HTML. Is it possibly to do with the image source? I have also had problems with the Photoshop images provided not appearing at all on the screen.
3 Answers
Nick Ocampo
15,661 PointsYou need to attach the class to a specific element. In your case, that would be the image tags where you're placing those icons. So something like
<img class="social-icon" src="url-to-your-image.jpg" />
Then your CSS rule
.social-icon { width:20px; height: 20px; margin: 0 5px }
Will reference any element in your HTML that has a class equal to "social-icon".
Hope that answers your question.
Nick Ocampo
15,661 PointsPost your code and explain what you are doing and what is the result you are trying to achieve please.
Holly Ramage
312 PointsIn HTML I added the class:"social-icon" :
<a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class:"social-icon"></a> <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class:"social-icon"></a>
I added the below in CSS in the footer section:
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
both in order to make the facebook and twitter icons smaller in the footer section of the web page.
Thanks!
Charlotte Luzuka
Courses Plus Student 703 PointsI had the same problem. I realised that I should have written in HTML:
class="social-icon" and not class:"social-icon"
Hope you sorted it out.
Holly Ramage
312 PointsHolly Ramage
312 PointsOk thanks for your help!