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 trialPreben Finnøy Olafsen
3,459 PointsSocial 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
3,459 PointsHey. 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
20,269 PointsYour 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
3,459 PointsThe problems it that they are supposed to get smaller. I tried what you said, didn't work.
Any ideas?
Dale Bailey
20,269 Pointsget small when you shrink the window? be smaller in general? on hover?
Preben Finnøy Olafsen
3,459 PointsBe smaller in general!
I add
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
and nothing happends.
Dale Bailey
20,269 PointsIt 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;
}
Dale Bailey
20,269 PointsDale Bailey
20,269 PointsNo 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.