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

Posted by smriti chawla
smriti chawla
2,566 Points

No styling I am adding in my main.css workspace is reflecting for the second section of my About page.

Can someone please check my workspace and tell me what's wrong?

Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

Can you post a workspace snapshot?

3 Answers

Philip Gales
Philip Gales
15,193 Points

Here is the video: https://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/add-iconography

Notice he doesn't use a backslash after the image URL's.

/***************************************
CONTACT PAGE 
****************************************/

.contact-info {
  list-style:none;
  padding:0;
  margin:0;
  font-size:0.9em;
}

.contact-info li a {
  background-repeat:no-repeat;
  background-size:20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px 0;
}

.contact-info li.phone a {
  background-image: url("../img/phone.png");
}

.contact-info li.mail a {
  background-image: url("../img/mail.png");
}

.contact-info li.twitter a {
  background-image: url("../img/twitter.png");
}

Your twitter is not working because you used 'Twitter' in your contact.html file. Change it to a lowercase 'twitter' to match your css selector.

<li class="twitter">
    <a href="http://www.twitter.com/intent/tweet?screen_name=chawlasmriti">@chawlasmriti</a>
</li>
smriti chawla
smriti chawla
2,566 Points

Thanks, Philip

smriti chawla
smriti chawla
2,566 Points
smriti chawla
smriti chawla
2,566 Points

Not sure how to do that on windows, especially bcoz workspace launches in a different window. But this is the code i am using while just following along the video:

/*************************************** CONTACT PAGE ****************************************/

.contact-info { list-style:none; padding:0: margin:0; font-size:0.9em; }

.contact-info li.phone a { background-image: url("../img/phone.png/"); }

.contact-info li.mail a { background-image: url("../img/mail.png/"); }

.contact-info li.twitter a { background-image: url("../img/twitter.png/"); }

Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

I can't tell without also looking at the markup. The snapshot tool in workspaces is in the top right hand corner and looks like a little camera: https://www.dropbox.com/s/oh62ot80b8q816b/Screenshot%202016-12-28%2013.05.38.png?dl=0

smriti chawla
smriti chawla
2,566 Points
smriti chawla
smriti chawla
2,566 Points

https://w.trhou.se/5w37lokvs2