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

Posted by xygnis
xygnis
695 Points

Icons in the wrong place in two column layout on contact page

I am currently working on the responsiveness of my page to screen width, and have got to the stage where it switches from a 1-column to 2-column layout . However, the phone/mail/twitter icons are now displaying incorrectly when the page resizes to two columns (they are fine in 1-column).

The issue is that the icons stay aligned to the left hand side of the page, while the contact info moves to the right hand column. I have been following along with the videos and can't see where the error is.

Thanks for any help :)

[edit]

In the video Nick tells you to float the secondary column to the right, which is what I did. However, if I float it to the left, it solves the icon problem. Can anyone tell me why this is the case? [/edit]

Brad Bucceri
Brad Bucceri
7,102 Points
Brad Bucceri
Brad Bucceri
7,102 Points

Hi xygnis,

Can you paste your code into this thread, please?

Brad

xygnis
xygnis
695 Points

From responsive.css

@media screen and (min-width: 480px) { /************************************************************************ TWO COLUMN LAYOUT *************************************************************************/

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

#secondary
  {
  width: 40%;
  float: left;
  }
xygnis
xygnis
695 Points

From main.css

.contact-info
{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}


.contact-info a
{
  display: block; /*means links take up a block of space (defined below)*/
  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')/*../moves up a dircetory to root as cannot access images directly from css*/
}

.contact-info li.mail a
{
  background-image: url('../img/mail.png')/*../moves up a dircetory to root as cannot access images directly from css*/
}

.contact-info li.twitter a
{
  background-image: url('../img/twitter.png')/*../moves up a dircetory to root as cannot access images directly from css*/
}
Brad Bucceri
Brad Bucceri
7,102 Points
Brad Bucceri
Brad Bucceri
7,102 Points

and what does your HTML look like?

5 Answers

Leslie Pico
Leslie Pico
4,190 Points
Leslie Pico
Leslie Pico
4,190 Points

Try checking your spelling, I had the same error and realized I missed a letter in the word secondary

Brad Bucceri
Brad Bucceri
7,102 Points
Brad Bucceri
Brad Bucceri
7,102 Points

Yes, make sure your spellings are correct and that your width and right float are set correctly on secondary – good idea Leslie. I seem to have been able to replicate your issue when I played around with those things.

Leslie Pico
Leslie Pico
4,190 Points
Leslie Pico
Leslie Pico
4,190 Points

Try checking your spelling, I had the same error and realized I missed a letter in the word secondary

xygnis
xygnis
695 Points
xygnis
xygnis
695 Points

Sorry for the delay in posting HTML!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Xygnis | Code Monkey</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Xygnis</h1>
        <h2>Code Monkey</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" >Portfolio</a></li>
          <li><a href="about.html" >About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section id="primary">
        <h3>General Information</h3>
        <p>Not currently looking for work as still training. The best way to contact me is via email.</p>
      </section>
      <section id="secondary">
            <h3>Contact Details</h3>
            <ul class="contact-info">
              <li class="phone"><a href="tel:xxx-xxxx">xxx-xxxx</a></li>
              <li class="mail"><a href="mailto:xygnis@gmail.com">xygnis@gmail.com</a></li>
              <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=Xygnis">@Xygnis</a></li>
        </ul>
      </section>

      <footer>
        <a href="https://twitter.com/Xygnis"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://www.facebook.com/Xygnis"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Xygnis.</p>
      </footer>
    </div>
  </body>  
</html>
xygnis
xygnis
695 Points
xygnis
xygnis
695 Points

In the video the float of the secondary column is set to right - if I do this it breaks things. If I set it to the left (as in code above) it all works.

I am happy that it works, but uneasy that I don't understand why it works one way, and not the other (in the video Nick says left vs right shouldn't make a difference, but good practice to use right (which didn't work at all for me))

xygnis
xygnis
695 Points
xygnis
xygnis
695 Points

Yes, make sure your spellings are correct and that your width and right float are set correctly on secondary – good idea Leslie. I seem to have been able to replicate your issue when I played around with those things.

Ha! Found the issue when running css.main through the w3 compliance checker - it was dodgy margins (forgetting to use a unit of measurement in a couple of places). I'm very happy that I now actually understand what the issue was!