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
Alex Thomas
4,247 PointsMy social icon won't resize.
Hello. I'm trying to resize the facebook logo but it's not working. Can anyone shed some light on this? Html and Css below...
<body> <header> <h1>Bo's Motor Works Inc.</h1> <h2>1836 East 6th Street, Tempe, AZ 85281</h2> <a href="https://www.facebook.com/Bos-motor-works-1436022043369062/?rf=139134379467563" class="social-icon" target="_blank"><img src="img/facebook-wrap.png" alt="Facebook logo"></a> <nav>
.social-icon { text-align: center; width: 10px; height: 10px;
}
Tray Denney
Courses Plus Student 12,884 PointsHaha. Happens to me all the time! Glad you got it fixed!
Alex Thomas
4,247 PointsI have a question maybe you can answer. On the website i'm making, I have six images. I have them spaced properly into two columns and they respond properly when resizing the viewport. I'm wondering what's the best way to animate them. I'd like to have them fade in and out to be replaced with the next image, so on and so on. I've looked at MDN but didn't really see anything useful. Do I need to add webkits etc. I've seen those on other tutorials but not sure if they're still valid. And, can i do all that while having a background color, overlaying a opaque background image?
Tray Denney
Courses Plus Student 12,884 PointsThe best way would be to use Jquery to animate your project. Here are the Jquery documents on how to do it:
http://api.jquery.com/category/effects/ You can also use some CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/transform?v=example
Alex Thomas
4,247 PointsGreat, thank you again.
1 Answer
Jake Salo
13,175 PointsHi Alex, try adding the class to the image, try this :)
<h1>Bo's Motor Works Inc.</h1>
<h2>1836 East 6th Street, Tempe, AZ 85281</h2>
<a href="https://www.facebook.com/Bos-motor-works-1436022043369062/?rf=139134379467563" class="social-icon" target="_blank">
<img class="social-icon" src="img/facebook-wrap.png" alt="Facebook logo">
</a>
.social-icon {
text-align: center;
width: 10px;
height: 10px;
}
Alex Thomas
4,247 PointsThank you Tray, I knew it was a targeting issue, I just didn't look at my own code close enough.
Alex Thomas
4,247 PointsThank you Jake, you and Tray are both correct. I need to be more diligent about going back over my own code. AND I need new glasses haha.
Tray Denney
Courses Plus Student 12,884 PointsTray Denney
Courses Plus Student 12,884 PointsHey Alex! Have you tried adding the class to the "img" element instead of the "a" element? It looks like you are trying to resize the link as a whole instead of just the picture. Let me know if that works or not.