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

Posted by brandonlind2
brandonlind2
7,823 Points

The background icons on a two column contact page aren't floating right with the contact links, how do I fix this?

I created a contact page like in one of the starting videos, but I'm not sure how to float the background image icon right. In the video they floated right with the addition of the responsive media queries, so I'm sure I did something wrong, but I have no idea what, help would be greatly appreciated 

/***contact page***/

.contact-info {list-style: none;
              margin: 0;
              padding: 0;
              font-size: .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 0 10px;}

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


.contact-info li.email a {background-image: url('../img/mail.png');}
/****responisve css****/

@media screen and (min-width: 480px) 
                   { .primary{ float: left;
                               width: 50%;}
                   { .secondary{ float: right;
                                 width: 40%;}}

/*html*/
 <section class="primary">
    <h3>General information</h3>
     <p> The best way to get ahold of me is through email, please use my cell for urgent inquries only.</p>
   </section>
   <section class="secondary">
    <h3> Contact Details</h3>
    <ul class="contact-info">
     <li class="phone"><a href="tel:(111)111-1111">(111)1111-1111</a></li>
     <li class="email"><a href="mailto:brandonl271@yahoo.com">brandonl271@yahoo.com</a></li>
     <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=brandonlidn">@brandonlidn</li>
    </ul>

2 Answers

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Brandon :)

So you columns are working fine, but the icons you have are not moving with the media query as you expect?

I am just wanting to get a better handle on where them icons should be both before and after the media query :)

Craig

PS.. I hope you dont mind I added some markdown syntax to your question to make the code show a little easier to readers in the future should this question be useful to others later on :)

Mike Mangone
PLUS
Mike Mangone
Courses Plus Student 1,910 Points
Mike Mangone
Mike Mangone
Courses Plus Student 1,910 Points

I'm having the same issue, any help would be appreciated!

Craig Watson
Craig Watson
27,930 Points

Hi Mike,

Can you take a snapshot of your code to take a look through :)

Craig