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 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!