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

HTML How to Make a Website Adding Pages to a Website Style New Pages

Posted by Bob Beaumont
Bob Beaumont
1,317 Points

About page paragraph text....Cramped

This may not be a real issue, it's just that I notice my paragraph text on my About page is a bit cramped. Meaning the spacing between the lines in a is a bit tight. If one wants to increase the spacing between the lines in a paragraph how is that accomplished code wise?

6 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Bob,

Your problem is your html,

<section>
        <img src="img/bob.jpg" alt="Photograph of Bob Beaumont" class="profile-photo">
        <h3>About</h3>
        <p class="test"></p><!-- you have closed the class test before you write your text -->
        <p>Hi, I'm Bob! Yes, I am a Space Cadet! This is my design portfolio where I practice my skills for courses in coding for the web on Treehouse.</p>
        <p>If you'd like to follow Nick on Twitter... (Nick is the guy teaching this course), his username is <a href="http://twitter.com/nickrp">@nickrp</a> </p>
</section>

It should be like this,

<section>
        <img src="img/bob.jpg" alt="Photograph of Bob Beaumont" class="profile-photo">
        <h3>About</h3>
        <p class="test">Hi, I'm Bob! Yes, I am a Space Cadet! This is my design portfolio where I practice my skills for courses in coding for the web on Treehouse.</p>
        <p>If you'd like to follow Nick on Twitter... (Nick is the guy teaching this course), his username is <a href="http://twitter.com/nickrp">@nickrp</a> </p><!-- you might want to add the test class here too -->
</section>

Hope this helps.

matthewhorton68
matthewhorton68
13,882 Points
matthewhorton68
matthewhorton68
13,882 Points

That can be accomplished with CSS:

In your HTML file:

<p class="test">Ipsum iudicem iis transferrem sed in quibusdam te appellat. Commodo id consequat, occaecat dolore quorum id veniam. Cupidatat ita anim. Vidisse e ipsum nescius, excepteur non officia aut ab fugiat ut ipsum, quorum a commodo quo velit, do litteris id quibusdam sed nostrud culpa lorem quo veniam, varias in vidisse ubi cillum ea ubi in anim ullamco. Anim expetendis si quorum irure an non fugiat nisi cillum laborum ea aute deserunt ullamco ne quis offendit a magna aute, dolor proident ubi aliqua irure a eu illum culpa quorum iudicem in ne aute laborum, dolor eu possumus. Quae in singulis eu enim, quorum probant aut adipisicing, incididunt ut quamquam, ea varias eruditionem.</p>

And in your CSS file:

.test { line-height: 2em; /*Or any other value that you see fit */ }

Bob Beaumont
Bob Beaumont
1,317 Points
Bob Beaumont
Bob Beaumont
1,317 Points

Hi Andre. Thanks for the quick answer.
I'm giving that a try, yet don't see a change. Maybe I'm not inputting the code in the proper place.
Here is my about.html 

<section>
        <img src="img/bob.jpg" alt="Photograph of Bob Beaumont" class="profile-photo">
        <h3>About</h3>
        <p class="test"></p>
        <p>Hi, I'm Bob! Yes, I am a Space Cadet! This is my design portfolio where I practice my skills for courses in coding for the web on Treehouse.</p>
        <p>If you'd like to follow Nick on Twitter... (Nick is the guy teaching this course), his username is <a href="http://twitter.com/nickrp">@nickrp</a> </p>
          </section>

And here is my css

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

.test {line-height: 2em;}
matthewhorton68
matthewhorton68
13,882 Points
matthewhorton68
matthewhorton68
13,882 Points

Try changing: .test {line-height: 2em;}

Into: p {line-height: 2em;}

That will target all paragraph tags.

Bob Beaumont
Bob Beaumont
1,317 Points
Bob Beaumont
Bob Beaumont
1,317 Points

....I tried the change. No result. No worries, it's not even part of the lesson. I'm probably getting ahead of myself anyway here. thanks.

matthewhorton68
matthewhorton68
13,882 Points
matthewhorton68
matthewhorton68
13,882 Points

You have to link a external stylesheet, otherwise it won't work.

You can use an inline style though:

<p style="line-height:2em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in urna augue. Aliquam et risus ut ipsum lacinia facilisis eu sed sem. Nulla blandit urna at mauris tincidunt, et venenatis lectus tempus. Fusce placerat sapien eget auctor vulputate. Aliquam ut nisi hendrerit, sagittis nisi ac, facilisis velit. Nullam eget facilisis ex, ornare dapibus ligula. Mauris a tellus ante. Vivamus vehicula metus arcu, non fringilla nibh imperdiet ac. Maecenas interdum lacus tellus, eget euismod mauris venenatis eget. Morbi tristique arcu et nisl lacinia, in porta quam laoreet. </p>