Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Are your icons not downsizing? My fix within

I saw some people asked about their icons not downsizing after the lesson, but no conclusive answer (unless you made a typo error).

After adding class="social-icon" to my html and .social-icon { } to my css, my icons weren't downsizing. When I inspected the page elements upon right-click, I noticed Workspaces wasn't saving the class in the html for some reason, even after rebooting the browser (Safari).

I instead got rid of the class and added 'footer img { }' to the css and it worked just fine.

Probably a bug, but hopefully this helps those with the same issue as myself

1 Answer

Hi, make sure you are giving the class to the <img> element and not to the anchor <a> element, for me all worked fine (windows/chrome)! Here the example from my workshop:

<a href="http://twitter.com/xxx"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

try to do like this and adjust the size as u prefer, let me know if still not working!

Hiya andrea, thanks for the tip! Unfortunately it hasn't fixed my particular issue. I noticed that in later videos that used classes such as the class="profile-photo" for the About Page vid, my classes still don't work! And those videos also have threads of people experiencing the same issues, going back a couple months. I'm wondering if it's truly a workspace bug for certain browser versions.

For now, I've discovered that giving it an id instead of a class, then selecting it with a # in css, works pretty well.

edit: it seems if I use img.profile-photo { } instead of just .profile-photo {}, it works!