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 CSS Basics (2014) Enhancing the Design With CSS Gradients: Color Stops

Code Challenge

It's solved.

I really don't know the mistake I made in the next code challenge, but it keeps telling me the code I wrote is incorrect. This is the task: Create a new rule that targets .main-header. Then, use the background-image property to define a linear gradient. Set the first color stop to steelblue and the second color stop to darkslateblue. Set the second color stop's position to 90%. Finally, add the value that sets the gradient direction from bottom to top.

This is my answer:

.main-header{ background-image:linear-gradient(to top, steelblue, darkslateblue 90%); }

I tried to write the same code in my workspace, and there it worked just fine, so how come the challenge wont accept it?

I get this messages when I ask it to check my work: Bummer! Make sure you're defining a linear gradient.

5 Answers

It is solved - I added some space between background-image: and linear-gradient.

Sandro Meschiari
Sandro Meschiari
18,418 Points

The problem are the spaces, sometimes it doesn't accept them other time it pretends them, i lost so much time with this in other exercises.

Guil Hernandez
Guil Hernandez
Treehouse Teacher

I apologize, Anna GrosbΓΈl-Rais and Sandro Meschiari,

The space issues should be fixed now. :)

Good guy Guil

Sandro Meschiari
Sandro Meschiari
18,418 Points

Thanks Guil Hernandez, once i knew it was that wasn't a problem any more.

Facing a similar issue, heres my code: .main-header { background-image: linear-gradient (to top, steelblue 0%, darkslateblue 90%); }

If i remove the 0% it works smoothly; baffling.

Well you are only told to set a color stop position for darkslateblue, so even though adding 0% to steelblue would look the same as if it wasn't there, it is unnecessary code.

Shouldn't one get extra points for following the syntax?! But yes, unnecessary code it is.

Haha sure, and then -1 point for adding unnecessary code. q: