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

Posted by claudius mainja
claudius mainja
9,661 Points

how can i manage to pass on this stage it was telling me that challenge 3 not is no longer passing now its bummer

where am i getting it wrong

style.css 
/* Complete the challenge by writing CSS below */
.main-header{

}
.main-header {
  background-image:linear-gradient(steelblue,darkslateblue);
}
.main-header {
  background-image:linear-gradient(to top ,steelblue,darkslateblue 90%);
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->
  </body>
</html>

3 Answers

Jacob Herrington
Jacob Herrington
15,835 Points
Jacob Herrington
Jacob Herrington
15,835 Points

Hey Claudius, you're actually correct on your CSS, but I think you are misunderstanding how the challenges work.

You only need one CSS rule -- you don't need to add a new CSS rule for each task, instead just add on to what you already have.

This is the only code you need to keep:

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

thank you Mr Herrington it did work , but it did work cause i did copy the one you gave me and i did paste it .. i did use mine , i was coding and did remove other above rules and use the same as the one you gave me but it didnt work .. and thank you again

Jacob Herrington
Jacob Herrington
15,835 Points
Jacob Herrington
Jacob Herrington
15,835 Points

The problem with your CSS was really small and easy to miss -- you had an extra space right after "to top".

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

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

/*
The only difference is my consistent use of whitespace.
This makes my code more readable and it avoids errors
like the one you ran into.
*/

It's good practice to use whitespace consistently when working with computers, some programming languages require consistent whitespace, but even if they don't you should be careful to make sure your code is readable.

Trent Christofferson
Trent Christofferson
18,846 Points
Trent Christofferson
Trent Christofferson
18,846 Points

what that means is you are not supposed to change the code that worked before but add new code to pass the new challenge

claudius mainja
claudius mainja
9,661 Points
claudius mainja
claudius mainja
9,661 Points

thank you mishkin that's where the problem was also did notice it just now ... but it did work by copying and pasting the one above i don't know why

Jacob Mishkin
Jacob Mishkin
23,118 Points

Did you remove the extra code prior to submitting your answer?

and did you have the correct comma spacing? in your "correct" answer you [lace the comma after the first color not after the gradient direction.