Learn Intermediate CSS by Building a Cat Painting - Step 8

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
This lesson asks me to make a linear gradient with two colors (one color at 85%, and the other at 100%), and for some reason it doesn’t accept my code even though the gradient itself is working. What am I doing wrong?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fCC Cat Painting</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
      <div class="cat-head"></div>
    </main>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

body {
  background-color: #c9d2fc;
}

.cat-head {
  width: 205px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 46%;

/* User Editable Region */

background: linear-gradient(
  #5e5e5e 85%,
  #45454f 100%
);

/* User Editable Region */

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Challenge: Learn Intermediate CSS by Building a Cat Painting - Step 8

Link to the challenge:

2

I tried it. It works when the styles are put on the same line:

background: linear-gradient(#5e5e5e 85%, #45454f 100%);

But fails if you put new lines:

background: linear-gradient(
  #5e5e5e 85%,
  #45454f 100%
);
1 Like
3

Does putting colors in new lines have any effect on the code? Or is this just a silly mistake on freeCodeCamp’s part?

4

Adding lines has no effect on the code. (And you should do it when writing styles for readability).

However, that is not the case when you want to pass tests on fCC.

My guess is that the tests are designed to pass when the styles are put on the same line.

5

Good catch @JosephMaina.

I also discovered that you absolutely need to have a space after the comma or it will not pass.

Do you feel like opening up a github issue for this? If not, I will, but I thought I’d give you the chance to do it first.

2 Likes
6

had the same issue also thanks for your post i solved it!

2 Likes
7

@JosephMaina I went ahead an opened and issue for this since a lot of people are starting to get bit by it.

Tests for Cat Painting Step 8 Too Strict

1 Like
8

Thanks @bbsmooth for raising the issue on behalf of others who are facing the same problem.

Keep coding.

1 Like