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

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
229,005 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!