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 Compass Basics Compass Layout and Typography Compass Typography

Posted by Tyler Wain
Tyler Wain
13,210 Points

I am having trouble with Compass Typography Code Challenge 4 of 5

I am having trouble completing this task.

Here is the prompt...

Using the rhythm() function, set the h1 bottom margin equal to 1 line-height unit based on its 48px font-size. Then, set the h2 bottom margin equal to 1 line-height unit based on its 36px font-size.

Here is my code..

/* Write your SCSS code below. */

// Imports @import "compass/typography"; @include establish-baseline($base-font-size); h1 { @include adjust-font-size-to(48px); }

h2 { @include adjust-font-size-to(36px); }

h1 { margin: 1 auto rhythm(1, 48px); }

h2 { margin: 1 auto rhythm(1, 36px); }

// Variables $base-font-size: 16px; $base-line-height: 24px; @include establish-baseline;

// Page Styles

// Imports @import "compass/typography";

Any help would be great!

4 Answers

Ben Townsend
Ben Townsend
4,127 Points

Hi Tyler,

I struggled with this one a bit when I went through Compass Basics. I've done the challenge again and this is the code you're after:

// Page Styles

@include establish-baseline(16px);

h1 { @include adjust-font-size-to(48px); margin-bottom: rhythm(1); }

h2 { @include adjust-font-size-to(36px); margin-bottom: rhythm(1); }

The documentation on http://compass-style.org is quite helpful for stuff like this.

All the best,

Ben

Atanas Sqnkov
Atanas Sqnkov
14,981 Points
Atanas Sqnkov
Atanas Sqnkov
14,981 Points

So this has to be written on the same line when it is a function, or else it doesn't work? Or is this only in the code editor here on Treehouse?

Tyler Wain
Tyler Wain
13,210 Points
Tyler Wain
Tyler Wain
13,210 Points

Awesome, thanks so much Ben. I was trying to make my way through that site, but obviously missed something in implementing the lessons.

For the 5th and final stage, is using

trailer($lines, $font-size, $property)

along the right trail?

Im not sure how to identify p rules specifically with that..

Ben Townsend
Ben Townsend
4,127 Points
Ben Townsend
Ben Townsend
4,127 Points

You're welcome Tyler ;)

Yes you're definitely on the right track. Did you complete the challenge?

Ben

Tyler Wain
Tyler Wain
13,210 Points
Tyler Wain
Tyler Wain
13,210 Points

No, not yet. I keep getting theBummer! Invalid CSS after "...ass/typography"": expected "{", was ";"