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

Posted by erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Paragraph problem!

Hello, when i resize my browser, my paragraph get into wierd lines, some lines are just 2 words, and it looks wierd. any idea of to make the text look even with the lines, without using justify because i get these wierd rivers

// erdrag

Baruch Velez
Baruch Velez
275 Points

Can you post the code to see the problem?

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

http://codepen.io/anon/pen/wBgQjN resize the browser and look at the paragraphs

Baruch Velez
Baruch Velez
275 Points

So your concern are the one and two word lines when resizing? There's no way to adjust that in CSS, you'll have to create (or find) some JavaScript that will check the paragraph for the last line and if it has less than x amount of words then add a break point to the word before it. Its more complicated than it sounds.

I found this, https://github.com/ajkochanowicz/Buddy-System , that might help you out, but that will only work if the last line of your paragraph has only 1 word. I'm guessing you can go into the JavaScript and change that, but I'll let you figure that one out.

1 Answer

Iris Avalon
Iris Avalon
14,477 Points
Iris Avalon
Iris Avalon
14,477 Points

Looking at your code on the codepen you linked, it would seem you've got line break tags

<br />

in your paragraph. Have you tried just setting a max-width on your <div class="still-learning"> container instead? something like 

.still-learning {
    max-width: 60%;
    margin: 0 auto;
}

That would let you achieve a similar effect without the breaking. As on small resolutions with less screen space, the paragraph will still try to split at those spots you added break tags.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Thanks, but when i add max-width my paragraph moves to the left of the container div.

// erdrag

Iris Avalon
Iris Avalon
14,477 Points
Iris Avalon
Iris Avalon
14,477 Points

Sorry, that was my bad. I forgot to add in the other property to the code. Your container css should look like this:

.still-learning {
    margin: 0 auto;
    max-width: 60%;
}

Margin: 0 auto will tell a block level element to have split the margin on the left and right side of the element evenly (removing top and bottom margin. You can go ahead and change the 0 to whatever you'd like if you want margin on top and bottom), effectively centering it on the screen.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Hey i added the code to both of my paragraph's but the first h2 headline's words stack upon eatchother at smaller browser width. heres how it looks like http://imgur.com/ZMe9Fp7 , i tried to change the width of it, but it didnt help!

heres my code for the responsive and main css 

@media screen and (max-width: 680px) {



     .about-p {
      text-align: center;
     }

     .contact-p {
      text-align: center;
     }

    header {
      height: 100%;
    }
  .image {
    width: 100%;
  }

  .nav {
    display: block;
      width: 100%;
      text-align: center;
      margin-top: 2%;

    }

    header img {
      margin: 0 auto;
    }

    .intro-pic {   

      max-width: 100%;
      margin: 0 auto;
    }


    .quote {

    }

    .copyright p{
      font-size: 16px;
    }

    .work {
        margin: 0 auto;
    max-width: 90%;
    }

    .still-learning {
       margin: 0 auto;
    max-width: 90%;
    }


    .work h2 {
  text-align: center;
  min-width: 90%;
}

}

.work h2 {
  text-align: center;
  min-width: 90%;
}

.work {
   margin: 0 auto;
    max-width: 70%;
}



.work p {
  text-align: center;
}

.still-learning h2{
  text-align: center;
}

.still-learning p {
  text-align: center;
}

.still-learning {
   margin: 0 auto;
    max-width: 70%;
}