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 trialBob Beaumont
1,317 PointsAbout 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
19,579 PointsHi 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
13,882 PointsThat 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
1,317 PointsHi 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
13,882 PointsTry changing: .test {line-height: 2em;}
Into: p {line-height: 2em;}
That will target all paragraph tags.
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
13,882 PointsYou 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>