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!

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

Posted by Darrell Poole
Darrell Poole
4,031 Points

Issue with iconography being covered by text

I am nearing completion of the building a website portion of my track and my code is exactly the same as Nick's. The iconography lines up perfectly on mobile but on PC the iconography overlaps with the first column's text rather than pushing over to the right to be next to the second column's text. Below are the relevant sections of HTML and CSS code. Does it have to do with making the iconography background images in the CSS and thus they are stuck in the one position relative to the page? If so, how do I remedy this?

Any help on how to fix this would be greatly appreciated!

    <div id="wrapper">
      <section id="primary">
        <h3>General Information</h3>
        <p>Blah blah blah words.Blah blah blah words.Blah blah blah words.Blah blah blah words.Blah blah blah words..</p>
        <p>Blah blah blah words.</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
            <li class="phone"><a href="tel:??????">????????</a></li>
            <li class="mail"><a href="mailto?????@gmail.com">??????@gmail</a></li>
            <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=??????">@??????</a></li>
        </ul>
      </section>

/*******************************************
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('../images/phone.png');
}

.contact-info li.mail a {
    background-image: url('../images/mail.png');
}

.contact-info li.twitter a {
    background-image: url('../images/twitter.png');
}
Timothy Parenteau
Timothy Parenteau
7,515 Points
Timothy Parenteau
Timothy Parenteau
7,515 Points

have you tried adding padding to contact-info { } not the anchor element one?

Darrell Poole
Darrell Poole
4,031 Points

I tried this but it didn't work. I got it resolved now though. Thanks for your help, Tim!

1 Answer

Mathieu Delporte
Mathieu Delporte
8,097 Points

I'm not sure I understand what the problem is, the way the CSS is written you should have 3 items in the second column below eachother, each with an icon on the left.

Are the columns overlapping of is the text of the 3 list items overlapping the icons?

Darrell Poole
Darrell Poole
4,031 Points

Here are some screenshots: http://imgur.com/a/HvNQw

In the mobile view everything slides down just fine with three text items each with icons but when stretched on PC the icons stay in the same place and overlap with column one instead of moving to the right with column two.

Mathieu Delporte
Mathieu Delporte
8,097 Points

Try changing display:block to inline-block and see if this changes anything.

Code looks OK to me, should work since you have it exactly like Nick's. It's weird that the icons are overlapping the other section..

Darrell Poole
Darrell Poole
4,031 Points

That did it for me! Thanks a lot!