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

HTML How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Social media icons disappearing after I resize them with CSS

When I resize my social icons with css they disappear instead.

Here is the code:

HTML:

<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>Ā© 2016 Nick Robillard.</p> </footer>

CSS:

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

Mary-Ann Burton
Mary-Ann Burton
15,834 Points

Your css isn't showing up exactly as coded but I assume you meant it was

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

which looks fine.

Have you tested the page in multiple browsers? Which browser are you using by default? Originally I was having the same difficulty, but it was simply a problem with my browser not supporting the CSS, and when I tested it within Chrome it worked fine.

Owa Aquino
Owa Aquino
19,277 Points

Your code works fine in my end.. hmmm can you specify the changes you made when say resizing? (width or height)

1 Answer

I'm on a chromebook so is my default (and only) browser.

By resizing I mean shrinking the icons to half of their normal size per the instructions in the video.

Thanks.