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

Posted by Preben Finnøy Olafsen
Preben Finnøy Olafsen
3,459 Points

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

Preben Finnøy Olafsen
Preben Finnøy Olafsen
3,459 Points

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

Dale Bailey
Dale Bailey
20,269 Points

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.

Dale Bailey
Dale Bailey
20,269 Points
Dale Bailey
Dale Bailey
20,269 Points

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;
}
Preben Finnøy Olafsen
Preben Finnøy Olafsen
3,459 Points

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

Any ideas?

Dale Bailey
Dale Bailey
20,269 Points

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

Preben Finnøy Olafsen
Preben Finnøy Olafsen
3,459 Points

Be smaller in general!

I add

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

and nothing happends.

Dale Bailey
Dale Bailey
20,269 Points

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;
}