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: CSS for contact-info class not being applied when I open in browser

[MOD EDIT - HTML content altered to remove personal information.]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Erin Connolly | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800|Changa+One:400,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css" type="text/css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Erin Connolly</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Gallery</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id = "wrapper">
         <section>
           <h3>General Information</h3>
            <p>Lorem ipsum dolar sit amet.</p>
            <p>Lorem ipsum dolar sit amet.</p>
         </section>
           <h3>Contact Details</h3>
              <ul class="contact-info">
                <li class="phone"><a href="tel:555-867-3509">555-867-3509</a></li>
                <li class="mail"><a href="malto:example@gmail.com">example@gmail.com</a></li>
                <li class="twitter"><a href="https://twitter.com">@exampletwitter</a></li>
               </ul>
      <footer>
        <a href="https://twitter.com/"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social icon"></a>
        <a href="https://www.facebook.com/"><img src="img/facebook-wrap.png"           alt="Facebook logo" class="social icon"></a>
        <p>&copy; 2014 Themes Come True</p>
      </footer>
    </div> 
  </body>
</html>
/*********************************
GENERAL
**********************************/

#wrapper {
  max-width: 940px;
  margin: 0 auto; 
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img{
  max-width: 100%
}

/*********************
HEADING
*********************/

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em; 
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight:normal;
}



/****************************************
NAVIGATION
****************************************/

nav{
  text-align:center;
  padding:10px 0;
  margin:20px 0 0;
}

nav ul{
  list-style: none;
  margin:0 10px;
  padding:0;
}

nav li{
  display:inline-block;
}

nav a{
  font-weight:800;
  padding: 15px 10px;
}

/****************************************
FOOTER
****************************************/

footer{
  font-size:0.75em;
  text-align:center;
  padding-top:50px;
  color:#CCC;
}



/****************************************
PAGE:PORTFOLIO
****************************************/

#gallery{
  margin:0;
  padding:0;
  list-style:none;
}

#gallery li{
  float:left;
  width:45%;
  margin:2.5%;
  background-color:#f5f5f5;
  color:#bdc3c7;
}

#gallery li a p{
  margin:0;
  padding:5%;
  font-size:0.75em;
  color: #bdc3c7;
}



/****************************************
PAGE: ABOUT
****************************************/

  .profile-photo{
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
  padding-top: 10px;
}


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

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

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

.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');
}


/****************************************
COLORS
****************************************/

/*site body*/
body{
  background-color: #fff;
  color:#999;
}

/*green header*/
header{
  background: #6ab47b;
  border-color: #599a68;
}

/*nav background on mobile*/
nav{
  background: #599a68;
}

/*logo text*/
h1,h2 {
  color: #fff;
}

/*links*/
a {
  color: #6ab47b;
}

/*nav link*/
nav a, nav a:visited {
  color:#fff
}

/*selected nav link*/
nav a.selected, nav a hover{
  color: #32673f;
}

4 Answers

Sorry, your contact page is looking pretty good to me. All of your styles seem to be applying correctly. I would try the following steps to see if we can refresh your preview.

Refresh the preview page.

Close the preview page and workspace completely and reopen them.

Clear your browser cache. Usually this option is under 'History' or similar.

Let me know if any of those work for you. The page looks great for me!

Your CSS seems to be rendering correctly for me. Can you further describe the behavior you're seeing?

You can also share your current workspace by taking a snapshot. The snapshot button looks like a camera in the top right of your workspace. This will allow you to post a link to your code and filestructure, including images.

The smaller font, margins, padding, and images for the list items on the contact page are not coming across in my browser. Here is a link to the snapshot: https://w.trhou.se/aw56com4nq

Also...is there any way to delete my forum posts?!! My profile page says that I am looking for a date and it includes my contact info! I was just poking fun at the original script of the tutorial. I'm definitely not looking for a date.

All in good fun. :)

You can edit your previous posts to remove any information you'd rather not have out in the wild. It'll be an option at the bottom of each post.

EDIT - You can also remove the snapshot link once your problem is solved.

i think you're right. Once I switched to Safari, it worked!