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
David Moorhead
18,005 PointsAppreciation toward the one who helps answer Task 3 of 3: CSS Custom Function.
Task 3 instructions are: Finally, create a rule that targets h1. Use the px-to-rem function to convert a font-size value of 60px to a value in rem units.
The @function below is the most recent of my final answers. The bummer read: Make sure you name the function 'px-to-rem.'
$base-font-size: 16px;
// Write your function here
@function: px-to-rem($font-size: 60px, $base-font-size: 16px) {}
h1 { @include px-to-rem(60px / 16px) * 1rem; }
6 Answers
Franklyn Gregory
12,098 PointsHey David! I was stuck on this for sometime my self for a whole day!! Hope this helps!
@function px-to-rem($target, $context: $base-font-size){ @return ($target / $context) * 1rem; }
h1{ font-size: px-to-rem(60px); }
Steven Parker
231,236 PointsHere's a few hints:
- the first function argument should be "$target", and it does not need a default value
- the default for "$context" should be the variable itself, not the value from it
- all of the calculations should be performed inside the function
- the function should "@return" a result
- no "@include" is needed
- the styling rule for h1 should include a "font-size" setting
- the function should be called in the value part of the setting
- no formula will be needed in the styling rule, just pass the value to be converted to the function
I'm betting you can get it from here.
David Moorhead
18,005 PointsHello, Stephen,
Thank you. I've given you a Best Answer reward for showing up and writing your response!
Alas, I've still not got accurate syntax to pass the task. I am still seeing numerous bummers. For a while, I'll have to sit without a Web Design chevron for track completion; life won't change with it.
Thanks again, Stephen. :)
Steven Parker
231,236 PointsLet's not give up, show what the code looks like now that you've applied the hints.
David Moorhead
18,005 PointsHi, Steven,
Thanks for your encouragement. The syntax I thought I understood, I don't, and I'm about to pull my hair out! The answer should be so simple yet misunderstanding has reigned.
The bummers with various messages keep coming after applying codes from your hints and from Hernandez's videos, which I was disinclined to indulge another watch. I watched them anyway, hoping something would pop for me. Here is the most recent of numerous attempts for completion of the task.
@function px-to-rem($target, $context: $base-font-size) {
@return h1 (60px / 16px) }
Steven Parker
231,236 PointsWhen the instructions say "In the @return statement, divide $target by $context, and multiply it by 1rem.", they mean multiply using the variables by name. Don't substitue values for them. And you still need to multiply by 1rem.
Also, there's a stray "h1" there, which is not part of the function or task 2.
When you get to task 3, you'll create a CSS rule for "h1", but that will be outside of the function.
David Moorhead
18,005 PointsHello, Steven,
Thank you for the attention and expertise you've shown!
I'm moving on to the next thing, leaving CSS behind until the brain has had more time for sorting syntax. If you wish, keep this page "Followed," and one day, you'll see I've responded with good news.
Best,
David :)
David Moorhead
18,005 PointsFranklyn, It Worked!
You get FIVE GOLD STARS * * * * *, and a big smile :) !!
Thank You! David
Steven Parker
231,236 Points
