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.

HTML How to Make a Website Adding Pages to a Website Add Iconography

.contact-info a {} is not changing anything in the contact info

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

I added this to my css and it looked exactly the same as before i added it. is there some kind of mistake in the code?

6 Answers

Hi, I can see the problem. You have an unordered list with a class of contact-info but the problem is your unordered list has its closing tag in the wrong place. Just move the /ul to below the last li just above the closing section tag

Steven Parker
Steven Parker
220,415 Points

I notice you are changing some background options, but you don't establish a background, so unless one is established elsewhere these won't do anything visible. The other changes will only affect spacing.

Did you remember to save your edits (using the menus or the control-s shortcut)?

Also, after you save, you need to refresh your browser preview.

The issues that I'm having are with the spacing. Even with the margin and the padding that i added. Yup its all saved and i refreshed the browser.

should i post the whole CSS and html file?

We need to see the html of the contact page and all of your css. Have you added media queries yet? It may be that you have another css page for when the screen is bigger and this may be why you cant see the changes on the size screen you are on

So far I only have the the css page for mobile. I haven't added any media queries yet.

here is the html for the contact page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Mikey Rizkalla | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700italic,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
    <body>
      <header>
        <a href="index.html" id="logo">
          <h1>mikey rizkalla</h1>
          <h2>Designer</h2>
        </a>  
        <nav>
          <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">Contact</a></li>
            <li><a href="contact.html" class="selected">Contact</a></li>
          </ul>
        </nav>
      </header>
      <div id="wrapper">
        <section>
          <h3>general</h3>
          <p>blablabla blablabla questions fuck off</p>
        </section>
        <section>
          <h3>Contact</h3>
          <ul class="contact-info"></ul>
          <li class="phone"><a href="tel:555-6555">555-6555</a></li>
          <li class="mail"><a href="mailto:mikeyrizkalla@live.com">mikeyrizkalla@live.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </section>
        <footer>
          <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a>
          <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a>
          <p>&copy; 2016 Michael Rizkalla.</p>
        </footer>
      </div>
    </body>
</html>

here is the all the css:

/***************
GENERAL
****************/

body {
  font-family: 'Open Sans', sans-serif;
}

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

a {
text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
 margin: 0 0 1em 0;
}



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

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

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

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

h2 {
  font-size: 0.75em;
  margin: -5 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;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

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



/***************
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%;
}



/***************
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;
}

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

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

amazing I never would've found that. thanks Richard!