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 Adding Pages to a Website Add Iconography

Fernando Duenas
Fernando Duenas
3,042 Points
Posted by Fernando Duenas
Fernando Duenas
3,042 Points

min-height: 20px;

im having an issue with the icons, mail and twitter. With the right " .contact-info a{} " rule thought in this video i get these icons multiplied. if i get rid of " min-height: 20px; " problem is solved. I just dont understand why this is happening. i checked my code and everything seems to be exact. the only difference is that im using sublime text. thank you

5 Answers

Fernando Duenas
Fernando Duenas
3,042 Points
Fernando Duenas
Fernando Duenas
3,042 Points

that only works for CSS code. it doesnt seem to work for HTML.

Chris Wise
Chris Wise
1,501 Points

write html after the 3 `

Fernando Duenas
Fernando Duenas
3,042 Points
Fernando Duenas
Fernando Duenas
3,042 Points

i did. and it didnt seem to work.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

I'm guessing that you are using the icons as bg-images. Try setting the background-repeat to no-repeat.

Fernando Duenas
Fernando Duenas
3,042 Points
Fernando Duenas
Fernando Duenas
3,042 Points

this is what i have: .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; Still gives me the same problem. i wish i could post a screenshot of what I'm seeing. Yes it does seem to be repeating, but its only happening on the left side. it looks like this:

(icon) 555-6425

(icon) (icon) email@email.com (icon)

(icon) (icon) @twitter (icon)

My only solution is when i cancel out " min-height: 20px; " and it looks how is supposed to.

Fernando Duenas
Fernando Duenas
3,042 Points
Fernando Duenas
Fernando Duenas
3,042 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.8em;
}

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;
    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: 20px;
}



/*****************************************
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;
}```
Fernando Duenas
Fernando Duenas
3,042 Points
Fernando Duenas
Fernando Duenas
3,042 Points

<!DOCTYPE html>

    <head>
        <meta charset="utf-8">
        <title>Fernando Duenas | designer</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Fernando Duenas</h1>
                <h2>Designer</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 looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please dont hesitate to contact me!</p>
                <p>Please only use phone contact for urgent inquiries. Otherwise, twitter and email are the best way to reach me.</p>
            </section>
            <section>
                <h3>Contact Details</h3>    
                <ul class="contact-info">
                    <li class="phone"><a href="tel:555-6425">555-6425</li>
                    <li class="mail"><a href="mailto:fernando39615@aim.com">Fernando39615@aim.com<a/></li>
                    <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@Fercho</a></li>
                </ul>
            </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; 2014 Fernando Duenas.</p>
            </footer>
        </div>
    </body>
</html>```
Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Copy and paste this before and after you code: ```