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

Posted by Kylie Randolph
Kylie Randolph
8,576 Points

I've quadruple checked my code.... my .contact-info does not select my un ordered list- please help :-)

I've tried to place the .contact-info attribute in other places on the my contact.html page and it still won't apply the styling.

I've also tried to add other styles (like bolding text and underlining) to the unordered list and it just seems that I'm selecting it correctly.

Any idea what I could have done wrong?

Thanks!!

Matthew Carson
Matthew Carson
5,965 Points
Matthew Carson
Matthew Carson
5,965 Points

Can you paste in your html & css files, or link to a snapshot of your workspace if that's what your using, I'll take a look.

Kylie Randolph
Kylie Randolph
8,576 Points

Thanks Matthew!

Below are my main.css and contact.html files... If you you need anything else, please let me know. Also if you you see any big 'no-nos' other than my .contact-info feel free to call me out!! (I want to make sure I don't pick up any bad habits.)

Thanks again,

Kylie

-main.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.8cm; }

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

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

nav { text-align: center; padding: 10px 0; margin: 10px 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: CONTACT ************/ .contact-info { list-style: none; margin:0; padding: 0; font-size: 0.9 em; }

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

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

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

-contact.html-

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Kylie Randolph | Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Kylie Randolph</h1> <h2>Web Developer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</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>I am not currently available. But please contact me with any questions!</p> <p>Please contact via social and email only.</p> </section> <section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"> <a href="tel:555.6425">555.6425</a></li> <li class="mail"><a href="mailto:kylie.r.randolph@gmail.com">kylie.r.randolph@gmail.com</a></li> <li class= twitter><a href="http://twitter.com/intent/tweet?screen_name=kyflyinhigh">@kyflyinhigh</a></li> </ul> </section> <footer> <a href="http://twitter.com/kyflyinhigh"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social icon"></a> <a href="http://facebook.com/kylierrandolph"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social icon"></a> <p>© 2016 Kylie Randolph.</p> </footer> </div> </body> </html>

Darrell Conklin
Darrell Conklin
21,988 Points
Darrell Conklin
Darrell Conklin
21,988 Points 
/************ 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.8cm;
}
h2 {
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}
/************ NAVIGATION ************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 10px 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: CONTACT ************/

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

.profile-photo {
    display: block;
    max-width: 180px;
    margin: 0 auto 30px;
    border-radius: 100%;
}
/************ 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 with 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;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Kylie Randolph | Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css"> </head>

<body>
    <header>
        <a href="index.html" id="logo">
            <h1>Kylie Randolph</h1>
            <h2>Web Developer</h2> </a>
        <nav>
            <ul>
                <li><a href="index.html">Portfolio</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>I am not currently available. But please contact me with any questions!</p>
            <p>Please contact via social and email only.</p>
        </section>
        <section>
            <h3>Contact Details</h3>
            <ul class="contact-info">
                <li class="phone"> <a href="tel:555.6425">555.6425</a>
                </li>
                <li class="mail"><a href="mailto:kylie.r.randolph@gmail.com">kylie.r.randolph@gmail.com</a>
                </li>
                <li class=t witter><a href="http://twitter.com/intent/tweet?screen_name=kyflyinhigh">@kyflyinhigh</a>
                </li>
            </ul>
        </section>
        <footer>
            <a href="http://twitter.com/kyflyinhigh"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social icon">
            </a>
            <a href="http://facebook.com/kylierrandolph"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social icon">
            </a>
            <p>© 2016 Kylie Randolph.</p>
        </footer>
    </div>
</body>

</html>
Kylie Randolph
Kylie Randolph
8,576 Points

Darrell,

What did you find/change?

Thanks!

Darrell Conklin
Darrell Conklin
21,988 Points
Darrell Conklin
Darrell Conklin
21,988 Points

nothing, I was just cleaning up that eye sore block of bleh to make it easier for someone to help you but I did notice you didnt have any # next to your id selectors

2 Answers

Matthew Carson
Matthew Carson
5,965 Points
Matthew Carson
Matthew Carson
5,965 Points

You did pretty much everything right. It works on my end. The padding and margin were both set to 0, and the list-style was set to none (removed the bullet points). The only problem was the font-size didn't change.

The reason the font-size didn't change was because there is a space between 0.9 and em, update it to:

font-size: 0.9em;

Also, in your css you missed the id selector '#' for the wrapper, so the width of the content is messed up a little.

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

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

// Same problem here. Add the '#' and it will center the logo text in the header.
logo {
    text-align: center;
    margin: 0;
}

Is that what you were talking about?

mazen akkari
mazen akkari
19,861 Points
mazen akkari
mazen akkari
19,861 Points

this particular section Kylie Randolph is talking about, is the objectives part. I had the same problem, you have to write .contact-info without the UL. You have done it right but the system is not updated properly and will not recognize the UL