My list item img's (phone, email icon) are not moving next to my text and the two columns are far two close together.

Question

Here is my Responsive.css:

@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) {
}

Here's my Contact.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</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>I am not currently looking for work, but I always love to help exciting teams working on exciting things. If you'd like to chat, please don't hesitate to contact me.</p>
        <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
      </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:xxx@example.com">xxx@example.com</a></li>
          <li class="twitter"><a href="http://www.twitter.com/intent/tweet?screen_name=xxxx">@xxx</a></li>
        </ul>
      <section>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>

Answer 1 · 2014-10-30T20:37:03Z

October 30, 2014 8:37pm

The text problem is coming from your #wrapper element. You have it set to be 100% of the width of the browser...plus 5% of padding on the left and right...bringing your total to 110% of the width of the browser window. You can fix this two ways:

1: Add a box-sizing declaration to your #wrapper, like so:

box-sizing: border-box;

This will include your padding in the 100% width. Or...

2: Change the width of your #wrapper to 90%. This way, 90%width + 5%padding on the left + 5% padding on the right = 100% total.

Hope this helps.

Answer 2 · 2014-10-30T20:43:57Z

October 30, 2014 8:43pm

To add to Shawn's last answer you could also just delete the max-width: 100%; in your wrapper div all together. Nick Pettit does not use that line in his code.

Answer 3 · 2014-10-30T20:23:44Z

October 30, 2014 8:23pm

Jordan,

Not sure if this is causing your problem, but it could be: it looks like you tried to close your #primary section and open your #secondary section in the same tag...which won't work. You'll need to close your #primary first, then open your #secondary, like so:

</section>
<section id="secondary">

After your unordered list, it also looks like you have an errant <section> tag. Delete that, make the edits above, and I suspect everything will work.

Answer 4 · 2014-10-30T20:23:47Z

October 30, 2014 8:23pm

I think I see my error in making the icons appear, but do you guys have any idea why when I make the width very small I am cutting off some of the text?

I see that I screwed up the close tags for sections and that fixed the icons, but did not fix the fact that when the width is really small some of the text is being cut off.

Answer 5 · 2014-10-30T20:23:50Z

October 30, 2014 8:23pm

Hi Jordan,

You don't have the proper closing and opening section tags for your 2 sections.

Here's the correct code for reference:

<section id="primary">
        <h3>General Information</h3>
        <p>I am not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to contact me!</p>
        <p>Please only use phone contact for urgent inquiries. Otherwise, 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:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>

Your 2 problem areas are here:

</section id="secondary">

and here:

</ul>
      <section>
      </section>

You want to make sure that you close your primary section and then open your secondary section. Then after the ul you would close your secondary section. You have both an opening and closing section there.

Let me know if you're still stuck.

Answer 6 · 2014-10-30T20:29:27Z

October 30, 2014 8:29pm

Here is my normal CSS:

/**********************************
GENERAL
***********************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  width: 100%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 1em 0;
}

/**********************************
HEADING
***********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em
  margin: -5px 0 0;
  font-weight: normal;
}



/**********************************
NAVIGATION
***********************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}


/**********************************
FOOTER
***********************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}


/**********************************
PAGE: PORTFOLIO;
***********************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p{
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}


/**********************************
PAGE: ABOUT;
***********************************/

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}


/**********************************
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')
}


/**********************************
COLORS
***********************************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

Answer 7 · 2014-10-30T20:48:34Z

October 30, 2014 8:48pm

Thank you guys! You all rock!

Welcome to the Treehouse Community

Looking to learn something new?

Jordan Michaels

Jordan Michaels

My list item img's (phone, email icon) are not moving next to my text and the two columns are far two close together.

7 Answers

Shawn Flanigan

Shawn Flanigan

Shawn Flanigan

Shawn Flanigan

Jason Anello

Jason Anello

Shawn Flanigan

Shawn Flanigan

Jason Anello

Jason Anello

Kay Ouchida

Kay Ouchida

Shawn Flanigan

Shawn Flanigan

Jordan Michaels

Jordan Michaels

Shawn Flanigan

Shawn Flanigan

Jordan Michaels

Jordan Michaels

Jason Anello

Jason Anello

Jordan Michaels

Jordan Michaels

Jason Anello

Jason Anello

Jordan Michaels

Jordan Michaels

Jordan Michaels

Jordan Michaels