Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Jeremiah Stiles
Jeremiah Stiles
1,324 Points

Why are my contact icons in my "primary" column, in the middle of my text when I expand the window?

Has anyone else had this issue and been able to fix it? What mistakes should I look for in my code?

@media screen and (min-width: 480px) {

  /*************************
  TWO COLUMN LAYOUT
  *************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%
    float: right;
  }

}

@media screen and (min-width: 660px) {

}

And my sections in contact.html

   <section id="primary">
        <h3>General Information</h3>
        <p>blah blah blah blah</p>
        <p>blah blah blah</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
        <li class="phone"><a href="tel:555-6425">555-6425</a></li>
        <li class="mail"><a href="mailto:blahblahblah@doofus.com">blahblah@doofus.com</a></li>
        <li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=Lycanis_Lykos">@Lycanis_Lykos</a></li></ul>
      </section>
Damien Watson
Damien Watson
27,419 Points

Hey Jeremiah, code would be handy (html and css) there is a link below when you ask questions "Markdown Cheatsheet" that can let you know. You can use 3 single quotes (above the tab key) followed by either 'html' or 'css' and end the code block by 3 more single quotes on their own line.

Jeremiah Stiles
Jeremiah Stiles
1,324 Points

Thanks, I think I got it. I pasted in what I have in my responsive.css file.

2 Answers

Ben Brenton
Ben Brenton
266 Points

Jeremiah Styles,

Having looked at your code, I think the problem you may be having is a simple yet frustrating one for all of us. There is a missing semi-colon in your "secondary" selector in your css file, which means it won't be applying the width element to your right hand side column. I've marked the spot in your code below:

@media screen and (min-width: 480px) {

  /*************************
  TWO COLUMN LAYOUT
  *************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: !40%!
    float: right;
  }

}

@media screen and (min-width: 660px) {

}

Hope this works!

Jeremiah Stiles
Jeremiah Stiles
1,324 Points

AH! I looked so long at it and never noticed that mistake. XD It's working perfectly now. :D Thank you so much!