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 amseroedd da
amseroedd da
11,021 Points

I am getting one word per line when I create a column in css

I have followed all the instructions with great attention but I get this problem that I don't know how to solve. From this video, after I create the columns and stretch the browser, each word gets one line like this :

General Info

I am not currently looking for new design work

etc. ------> This doesn't work. When I post the question it automatically positions them horizontally.

If I go back to a tall and narrow browser, the paragraphs position themselves one above the other but when it gets wider the problem I mentioned above happens.

I believe it might be from the main.css . I put the code below. The only weird thing that I noticed is that in my html editor ( called Kate) , the background-size property automatically turned into italics after I wrote it down. I am sorry if I confused you even more, but maybe if someone here uses the Kate editor they could tell me what that means and if it could be related to this particular issue.

Thank you very much!

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

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

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

  }

 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;
  }


  /* green background on mobile devices*/

 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;
}

This is the html file :

<!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=Open+Sans:400,400italic,700,700italic,800|Changa+One' 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" >Portofolio</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 Info </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 for urgent inquires </p>

    </section>


    <section id="secondary">

    <h3> Contact details </h3>
    <ul class="contact-info"> 
    <li class="phone"> <a href="tel:5556425"> 5556425 </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>

    <footer>
      <a href="http://twitter.com/nick"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
      <a href="http://facebook.com/nick"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>

      <p>&copy; 2014 Nick Pettit.</p>
    </footer>
    </div>
  </body>
</html>

And here is the responsive css file with the media queries I did so far from the tutorial

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


  /**************
 TWO COLUMN LAYOUT
 *************/
  #primary {

    width: 50px;
    float: left;

  }

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

  }
  }

Thank you again!

amseroedd da
amseroedd da
11,021 Points

It seems that the website took the example of my problem and positioned the words horizontally so I can't show you the example. However I hope I explained it well. It's one word per line in a very very long vertical paragraph.

Hayden Taylor
Hayden Taylor
5,076 Points
Hayden Taylor
Hayden Taylor
5,076 Points

can you post the html as well or better throw it up on js fiddle or something.

As I see it now you aren't even making any columns.

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You have a width of 50px set. Should be %

#primary {

    width: 50px;
    float: left;

  }
amseroedd da
amseroedd da
11,021 Points

wow I feel so silly now..Gotta upgrade my focus level...Thank you so much sir!! I wish you all the best!