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.

HTML

Charlotte Junker
Charlotte Junker
10,261 Points
Posted by Charlotte Junker
Charlotte Junker
10,261 Points

'Build a three column layout' video - creating columns moves my contact images out of alignment

Hi I'm on Stage 8 of 'How to make a website' in the video Build a three column layout. When writing the media query for min-width: 480px, we have used ids from primary and secondary columns for the contact page. When I do this, it throws the images we added earlier to the far left - behind the primary column, instead if including it in the secondary column. I'm pretty certain the code I have written is the same as Nick's and I can't see errors in the html or css for the contact page. There must be one though - can anyone spot it?! It's absolutely fine under the breakpoint of 480px.

Thank you so much!

From contact.html:

<section id="primary">
        <h3>General Information</h3>
        <p>Please contact me if you have any questions.</p>
        <p>Twitter and email are the best way to reach me.</p>
      </section>
      <section id "secondary">  
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:07793">07793</a></li>
          <li class="mail"><a href="mailto:c@example.com" c@example.com>c@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=example">@example</a></li>
        </ul>
      </section>

From main.css:

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

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

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

From responsive.css:

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

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

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

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

}

3 Answers

Kristen Law
Kristen Law
16,244 Points

In the contact.html file it looks like you have a typo when specifying the id for the secondary section. It should be <section id="secondary"> instead of <section id "secondary">. Hope that fixes the issue!

Charlotte Junker
Charlotte Junker
10,261 Points
Charlotte Junker
Charlotte Junker
10,261 Points

Thanks Kristen! Have done that - any ideas about what my error could be? thanks!!

Kristen Law
Kristen Law
16,244 Points

Yeah I saw you fixed the formatting so I removed my comment :) Checking out the code right now

Charlotte Junker
Charlotte Junker
10,261 Points
Charlotte Junker
Charlotte Junker
10,261 Points

Ah thank you!! So obvious now :) I really appreciate that - was driving me crazy! Will remember for future!