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

Watch Video

Posted August 22, 2016 4:27am by

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!!

August 22, 2016 4:36am

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.

August 22, 2016 5:21am

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>

August 22, 2016 5:32am

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

August 22, 2016 5:48am

Darrell,

What did you find/change?

Thanks!

August 22, 2016 5:58am

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

August 22, 2016 5:58am

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?

September 14, 2016 5:16pm

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

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Kylie Randolph

Kylie Randolph

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

Matthew Carson

Matthew Carson

Kylie Randolph

Kylie Randolph

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Darrell Conklin

Darrell Conklin

Kylie Randolph

Kylie Randolph

Darrell Conklin

Darrell Conklin

2 Answers

Matthew Carson

Matthew Carson

mazen akkari

mazen akkari