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 Icon won't scale down

http://codepen.io/fishingjoker/pen/NGKKPb

I Won't give up yet! So please help me! It's prolly something very minor.. However, another pair of eyes would help.

2 Answers

Hey. Thank you for your help. But what happend was that my live preview crashed or something.

Restarted computer. Launched Brackets... Now everything works? Oh well...

No worries, If you right click and inspect element you can see if the css is being applied and know if the browser has detected the changes.

Your links are broken on there but if you want to keep the aspect ratio just define one size value either width or height rather than both.

.social-icon {
    width: 20px;
    /* height: 20px; < delete this */
    margin: 0 5px;
}

The problems it that they are supposed to get smaller. I tried what you said, didn't work.

Any ideas?

get small when you shrink the window? be smaller in general? on hover?

Be smaller in general!

I add

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

and nothing happends.

It works for me, you need to remove one of those values so that it keeps its aspect ratio. There may be a difference between the code on codepen? The class is being applied to the footer icons try

footer img {
    width: 20px;
    margin: 0 5px;
}

or

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