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

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

Posted by Duke Kisch
Duke Kisch
2,483 Points

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

Andrea Cognini
Andrea Cognini
8,459 Points
Andrea Cognini
Andrea Cognini
8,459 Points

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!

Duke Kisch
Duke Kisch
2,483 Points

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!