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 Responsive Web Design and Testing Build a Three Column Layout

Damiano Madeddu
Damiano Madeddu
2,672 Points
Posted by Damiano Madeddu
Damiano Madeddu
2,672 Points

After i have add two columns, the icons are not moving with contact details but they stay on the left. I'M STUCK!

After i have add two columns, the icons are not moving with contact details but they stay on the left. I overlooked more than once but cannot find the mistake. Can anyone help me? Here the link to my workspace:

https://teamtreehouse.com/workspaces/19304972

I appreciate your help.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi there,

Unfortunately your workspace link isn't working. Could you fork your workspace out as a snapshot or post your code so we can have a look? Thanks :)

4 Answers

Damiano Madeddu
Damiano Madeddu
2,672 Points
Damiano Madeddu
Damiano Madeddu
2,672 Points

Good suggestion, but i applied the value inline to the property display on the general declaration to the links of the .contact-list class.

Looks good and simpler, but many thank for the tip.

.contact-info a {
  display: inline;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px
}
Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Try setting the icons to inline via CSS.

So this is in the div with the class of contact-info with the list items that have the classes of phone, mail and twitter.

.contact-info li.phone a {
    background-image: url('../img/phone.png');    
    display: inline;

This will make sure that only the width of the image is taken up and since all the images are the same size they will fit nicely into place next to your content.

Good luck.

Mobolaji Kamson
Mobolaji Kamson
1,421 Points
Mobolaji Kamson
Mobolaji Kamson
1,421 Points

I was having the same problem. This seems to have fixed it., but why ? did we miss something in the video ? i was watching it pretty closely. i don't think i missed anything.