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

Holly Ramage
Holly Ramage
312 Points
Posted by Holly Ramage
Holly Ramage
312 Points

I 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
Nick Ocampo
15,661 Points

You 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.

Holly Ramage
Holly Ramage
312 Points
Holly Ramage
Holly Ramage
312 Points

Ok thanks for your help!

Nick Ocampo
Nick Ocampo
15,661 Points
Nick Ocampo
Nick Ocampo
15,661 Points

Post your code and explain what you are doing and what is the result you are trying to achieve please.

Holly Ramage
Holly Ramage
312 Points
Holly Ramage
Holly Ramage
312 Points

In 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
PLUS
Charlotte Luzuka
Courses Plus Student 703 Points
Charlotte Luzuka
Charlotte Luzuka
Courses Plus Student 703 Points

I 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.