CSS grader bot marking this wrong?

HTML-CSS
1

I’m completing the CSS Skyline Challenge on the RWD Course and the instructions are as follows:

Add a linear-gradient to .bb2b that uses --building-color2 from 0% to 6% and --window-color2 from 6% to 9%.

My code sets a gradient:

.bb2b {
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--building-color2) 6%, var(--window-color2) 6% 9%);
}

The error message:
:heavy_multiplication_x: Try again. This might help:

You should use --building-color2 from 0% to 6% .

Is there something I missed?

2

Maybe this will help: linear-gradient() - CSS: Cascading Style Sheets | MDN (particularly section " Customizing Gradients").

3

I read it over, and I cannot find anything that works

4

Define each percentage stop separately.

5

so like this?

.bb2b {
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--building-color2), 0%, 6%, var(--window-color2), 6% 9%);
}
6

I just did it so I could help you.

Tip: 4 arguments for the function.

7

The format is color percentage comma.
So in your code 0% and 6% are relative to nothing.

8

I have 4 arguments

.bb2b {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    var(--building-color2) 0%, 6%,
    var(--window-color2) 6%, 9%
  );
}

The error remains the same, however

9

The first 6% and the last 9%, correspond to which color?
Answer: Nothing. :laughing:

Remember the argument for this function should be:

variable + percentage + comma

So you can’t do

percentage + comma

10

:sweat_smile: so I have to move them inside the comma?

11

You have to ALSO specify the variable:

background: linear-gradient(
  variable percentage comma
  variable percentage comma
  variable percentage comma
  variable percentage comma
);

Sorry I want to help you with this challenge but I can’t give you the solution.

1 Like
12

doing the following

.bb2b {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    var(--building-color2) 0%,
    var(--building-color2) 6%,
    var(--window-color2) 6%,
    var(--window-color2) 9%, 
  );
}

makes the following error appear:

✖️ Hang in there. You'll get there. A hint:
.bb2b should have a linear-gradient transitioning from --building-color2 at 0% to 6%, and --window-color2 at 6% to 9%.
13

That’s exactly what I did.

Maybe it’s a bug, so copy your code and try resetting the challenge then paste your code.
If that doesn’t work try removing the first 0% since it’s optional.
If it still does’t work try to put everything in the same line of code.

1 Like
14

I reset the challenge and then pasted my code, which didn’t work. Then I removed the first 0% which didn’t work. I moved every on to one line and :star2:it works!:star2:
Thank you!

2 Likes
15

I am glad that it worked! :sunglasses:

2 Likes
16

So i think this is unsolved because is not a bug.
You need to specify from 0 to 6 and 6 to 9, so you need to do this way:

.bb2b {
background: linear-gradient(
var(–building-color2),
var(–building-color2) 6%,
var(–window-color2) 6%,
var(–window-color2) 9%
);
}

Regards!

1 Like
17

I gave linear-gradient 1 space and it worked :smile:

18

Had the same issue.

The error occurs do to the extra comma placed after the last var().

Remove the comma after the 9% so it looks like:
background: linear-gradient(
var(–building-color2) 0%,
var(–building-color2) 6%,
var(–window-color2) 6%,
var(–window-color2) 9%
);

1 Like
19

Had the same issue.

The error occurs do to the extra comma placed after the last var().

Remove the comma after the 9% so it looks like:
background: linear-gradient(
var(–building-color2) 0%,
var(–building-color2) 6%,
var(–window-color2) 6%,
var(–window-color2) 9%
);

Basically your suggestion has to look as it is, however without the last comma:

background: linear-gradient(
variable percentage comma
variable percentage comma
variable percentage comma
variable percentage
);

1 Like
20

Tried it every way. Searched every frigging forum about this and copied and pasted in the codes and the thing still doesn’t work.