Stuck on Step 78: "You should not alter the first repeating-linear-gradient"

HTML-CSS
21

can you also post the rest of the selector? it is difficult to know if you changed something you shouldn’t have

1 Like
22

This isn’t the previous syntax used to go from 0% to 10%. I would use the same syntax you previously used.

23

Welcome back to the forum @masonicchef69

Here is a comparison of the original code and your code.

The code in blue is the original code, the code in red is your code.
The code in magenta is the overlap.

image
image465×318 14.3 KB

You are modifying the existing linear gradient.
You need to add a second linear gardient.

Happy coding

1 Like
24

Hi @pkdvalis

I may have reverted the code. I was trying to format the code by placing backticks at the end of the page.

That didn’t work as there was text between the code, so tried to change it back to start again.

1 Like
25

I have reset the code, also here is the reslut of trying to get it to work.

.fb1c {
  width: 100%;
  height: 80%;
background: repeating-linear-gradient(
    90deg,
    var(--building-color4) 0% 10%,
    transparent 10% 15%
  ),
  repeating-linear-gradient(
    90deg,
    var(--building-color4) 0% 10%,
    var(--window-color4) 10% 90%
  );
}
26

is this how the first repeating-linear-gradient was? or did you maybe change it when instructed to not change it?

27

The only part missing from that code is the top two lines:

  width: 100%;
  height: 80%;
28

no? we must have different definitions of “not changed”
there is quite a lot of differences from the starting code of the step

you changed quite a lot

image
image1135×440 24.9 KB

you should not change the first repeating linear gradient, you changed the first repeating linear gradient

29

You should not have two colour stops for a colour.

30

I reset the code and was give this to add to or edit.

.fb1c {
  width: 100%;
  height: 80%;
  background: repeating-linear-gradient(
      90deg,
      var(--building-color4),
      var(--building-color4) 10%,
      transparent 10%,
      transparent 15%
    )
}

All I did was tighten the transparent from two lines to one.
Than when Question/Step 78 asked for:

Step 78

You can add multiple gradients to an element by separating them with a comma (,) like this:
Example

gradient1(
  colors
),
gradient2(
  colors
);

Add a repeating-linear-gradient to .fb1c below the one that’s there; use your --building-color4 from 0% to 10% and --window-color4 from 10% and 90% . This will fill in behind the gradient you added last.

I tried to solve this issue?

31

and you need to add the second repeating-linear-gradient without changing the one that is already there, do you think can you manage to add a second repeating linear gradient without changing the first one?

1 Like
32

I thought that was what they were asking for: --building-color4 from 0% to 10% and --window-color4 from 10% and 90%?

33

it is, but it is possible that the tests do not accept the two color stops for a color, and you need to write them separately
but the tests are not able to check that until you manage to not change the first repeating-linear-gradient

34

I can try, but I thought I was doing that, though I guess I was not?

35

if it is different from before then you did not manage to not change it

36

I know I am very new to this. I am trying my best to get it correct, but everything I had tried previse had not been successful.

37

small guide on how not to change the first repeating-linear-gradient:

  1. reset the step
  2. find the first repeating-linear-gradient, where it starts and the ) where it ends
  3. now add a comma after the )
  4. add the second repeating-linear-gradient after the comma, do not change anything before the comma
1 Like
38

  1. Do not change the code that is already there. Just don’t.

  2. Add a NEW repeating-linear-gradient after the one that is already there.

39

Look at the initial code again:

Specifically here:

      var(--building-color4),
      var(--building-color4) 10%,

Follow this pattern. Don’t do it on one line like this:

40

I tried what you asked, here is the result:

.fb1c {
  width: 100%;
  height: 80%;
  background: repeating-linear-gradient(
      90deg,
      var(--building-color4),
      var(--building-color4) 10%,
      transparent 10%,
      transparent 15%
    ),
   repeating-linear-gradient(
    90deg,
    var(--building-color4), 
    var(--building-color4)10%,
    var(--window-color4) 10%, 
    var(--window-color4) 90%
  );  
}

Here is the reply: You should add a repeating-linear-gradient with a first color of --building-color4 from 0% to 10% .