Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Compass Basics Compass Layout and Typography Compass Typography

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

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

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?

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..

You're welcome Tyler ;)

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

Ben

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