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 trialMacauley Morgan
2,017 PointsWhen I use the code phone image doesn't show and twitter does twice with a large gap between it and mail, help?
When I use the code shown on the video my icon that I downloaded from the resources for the phone won't be displayed and the twitter icon is repeated twice with a large gap between twitter and mail which is not present between phone and mail...
3 Answers
Ryan Field
Courses Plus Student 21,242 PointsWe'd need to see your code in order to find out what's going on. Can you provide that or a snapshot of your workspace?
Macauley Morgan
2,017 PointsHTML <ul class="contact-info"> <li class="Phone"><a href="tel:07445840276">07445840276</a></li> <li class="mail"><a href="mailto:macauley.slrdesign@gmail.com">macauley@example.com</li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=Mexample">@Mexample</a></li> </ul>
CSS
.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') }
Ryan Field
Courses Plus Student 21,242 PointsHmmm, the only thing that looks like it might be causing problems is that you're forgetting a semicolon (;
) after your background-image
declarations in each of your list items in your CSS. Try adding those and refresh the page to see if it helps.
Macauley Morgan
2,017 PointsNo luck there...
Macauley Morgan
2,017 PointsMacauley Morgan
2,017 PointsI added it as an answer below by accident