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
Jose Mora Hernandez
2,909 PointsMy iconography is piled up with my text in my contact page
.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.facebook a {
background-image: url('../img/facebook.png');
}
6 Answers
Jason Anello
Courses Plus Student 94,610 PointsI didn't catch it when you first posted your css but you have a missing hyphen on your background size property.
background size: 20px 20px;
Should be: background-size: 20px 20px;
Thank you for posting code blocks, it makes it a lot easier to read.
I don't know if there are other problems but fix that first and see where you're at.
Jason Anello
Courses Plus Student 94,610 PointsHi Jose,
Are you saying that your phone icon is on top of the phone number?
Did you save the css and refresh the preview?
Jose Mora Hernandez
2,909 PointsWell it seems that my text is on top of my icons. (Phone icon, Twitter and mail) and yes I did this how it looks like
Jason Anello
Courses Plus Student 94,610 PointsOk, can you post the html for that contact page? I think you'll only need to post the section that has the contact information.
html has to be posted properly or it wont show up in the forums.
This thread shows you how: https://teamtreehouse.com/forum/posting-code-to-the-forum
Jose Mora Hernandez
2,909 Points<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jose Mora Hernandez | Professional Mexican</title>
<link rel="stylesheet"href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Dancing+Script:700,400|Special+Elite' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jose Mora Hernandez</h1>
<h2>Professional Mexican</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 available for everything. I will design for food!</p>
<p>Please contact through facebook only I'm homeless and do not own a phone.</p>
</section>
<section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:343-8453">343-8453</a></li>
<li class="mail"><a href="mailto:jose@jose.com">jose@jose.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=joseamora">@joseamora</a></li>
</ul>
</section>
<footer>
<a href="http://facebook.com/withoutfaith13"><img src="img/facebook-wrap.png"alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Jose Mora Hernandez.</p>
</footer>
</div>
</body>
</html>
Jose Mora Hernandez
2,909 Points/********************
GENERAL
********************/
body{
font-family: "Dancing Script" 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: "Dancing Script", sans-serif;
margin: 15px 0;
font-size: 1.75em;
}
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: 700;
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{
clear: both;
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.facebook 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 devices*/
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;
}
This is how my CSS looks like as of now. Thank you Jason for the link.
Jose Mora Hernandez
2,909 PointsSir, you are a life saver! Thank you very much!!!!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsAlso, you want to have a comma between font names.
font-family: "Dancing Script", sans-serif;You were missing a comma after "Dancing Script"This isn't related to the particular problem you're having now but it should be fixed.