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

Stefan Mach
Stefan Mach
3,691 Points
Posted by Stefan Mach
Stefan Mach
3,691 Points

the class did not work.

in html I put class="social-icon"

in css I put

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

what is wrong with this?

Unsubscribed User
Unsubscribed User
5,512 Points

Could you post your html code?

Brenna Leker
Brenna Leker
7,596 Points
Brenna Leker
Brenna Leker
7,596 Points

Hi Stefan, can you share the entire line of html code you used/where you applied "social-icon"?

Thank you

5 Answers

Jerome Braden
Jerome Braden
846 Points
Jerome Braden
Jerome Braden
846 Points

I have the same problem. Looking for an answer too. I've checked the code and rewatched it carefully. When I preview the icons DO NOT resize, no matter what number of pixels I choose. When I right click in the browser and hit "inspect element", the class="social-icon" does not appear in the html code at all, even though it's clearly there in my workspace.

Jerome Braden
Jerome Braden
846 Points

Okay, I just got it to work simply by using the "refresh page" button. It's normally not necessary to refresh more me because every time I preview I open a new browser window. I don't understand what's so special about "refresh" that "save + preview" can't accomplish, but there you go : /

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

can you post your code, that way we can take a look at it. Most times it's just a simple error.

Stefan Mach
Stefan Mach
3,691 Points
Stefan Mach
Stefan Mach
3,691 Points

<footer> <img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"> <img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">

I intentionally do not have the a href because I do not have twitter or Facebook

Unsubscribed User
Unsubscribed User
5,512 Points

I know it sounds dumb, but did you save the both the HTML & CSS documents? I've forgotten to do that so many times...

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Yep, and double check your call for the stylesheet follows this structure in your head tag, with correct file name -

<link rel="stylesheet" type="text/css" href="style.css" />
Stefan Mach
Stefan Mach
3,691 Points
Stefan Mach
Stefan Mach
3,691 Points

both files are saved, and we are way past the stylesheet being properly referenced. If it had not been, I would have had about a 1000 previous problems by now.

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Just trying to help! Mistakes can happen no matter how far along you are.

Hope you figure it out,

Ede

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

Is the png image of twitter and facebook showing or does it look like a broken images? The reason I ask is that it could be a problem with the linking of the image within the <img src="img/twitter-wrap.png" portion of the html.