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

HTML-CSS
1

Hi FreeCodeCamp community,

I’m currently working on Step 78 of the Responsive Web Design project:

“Add a repeating-linear-gradient to .fb1c below the one that’s there; use --building-color4 from 0% to 10% and --window-color4 from 10% to 90%.”

I’ve followed the instructions exactly and tried multiple variations. No matter what I do, I keep getting this error:

“You should not alter the first repeating-linear-gradient.”

Here’s the current code I’m using:

.fb1c {
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%);
}

I’ve:

  • Reset the code multiple times.
  • Ensured the first gradient was untouched.
  • Used incognito mode and a different browser.
  • Followed exact formatting requirements.

But I still get the same error.

Question:

Is there a known issue with this step? Or is there some hidden formatting rule I’m missing?

Thanks in advance for any help you can offer!

2

Please post a link to the step. Thanks

3

Do you mean: https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-variables-by-building-a-city-skyline/step-78

4

This is the original code:

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

It does look like you indeed changed the code that was already there instead of only adding more code.

5

So I just need to add to the code? Okay, will try that, Thank you.

6

I’ve tried every variation, including the most compact, exact code. Even different browsers, incognito mode, and a hard refresh didn’t work. I believe Step 78 might be broken."

7

Welcome back to the forum @masonicchef69

So the forum can assist, please post your full code.

Happy coding

8

How do I add the full code? Still learn all this…I am working on the “Learning CSS Variables by Building a City Skyline” portion.

Here is the code so far:

:root {
  --building-color1: #aa80ff;
  --building-color2: #66cc99;
  --building-color3: #cc6699;
  --building-color4: #538cc6;
  --window-color1: black;
  --window-color2: #8cd9b3;
  --window-color3: #d98cb3;
  --window-color4: #8cb3d9;
}

* {
  border: 1px solid black;
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.background-buildings, .foreground-buildings {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  position: absolute;
  top: 0;
}

.building-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.window-wrap {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
  width: 10%;
  height: 70%;
}

.bb1a {
  width: 70%;
}
  
.bb1b {
  width: 80%;
}
  
.bb1c {
  width: 90%;
}

.bb1d {
  width: 100%;
  height: 70%;
  background: linear-gradient(
      var(--building-color1) 50%,
      var(--window-color1)
    );
}

.bb1-window {
  height: 10%;
  background: linear-gradient(
      var(--building-color1),
      var(--window-color1)
    );
}

.bb2 {
  width: 10%;
  height: 50%;
}

.bb2a {
  border-bottom: 5vh solid var(--building-color2);
  border-left: 5vw solid transparent;
  border-right: 5vw solid transparent;
}

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

.bb3 {
  width: 10%;
  height: 55%;
  background: repeating-linear-gradient(
      90deg,
      var(--building-color3),
      var(--building-color3),
      var(--window-color3) 15%
    );
}

.bb4 {
  width: 11%;
  height: 58%;
}

.bb4a {
  width: 3%;
  height: 10%;
  background-color: var(--building-color4);
}

.bb4b {
  width: 80%;
  height: 5%;
  background-color: var(--building-color4);
}
  
.bb4c {
  width: 100%;
  height: 85%;
  background-color: var(--building-color4);
}

.bb4-window {
  width: 18%;
  height: 90%;
  background-color: var(--window-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
  width: 10%;
  height: 60%;
}

.fb1b {
  width: 60%;
  height: 10%;
  background-color: var(--building-color4);
}

(Question 78 goes here:

Step 78

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

Example Code

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.

Here is the code snippet provided to edit:

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


)

.fb2 {
  width: 10%;
  height: 40%;
  background-color: var(--building-color3);
}

.fb3 {
  width: 10%;
  height: 35%;
  background-color: var(--building-color1);
}
  
.fb4 {
  width: 8%;
  height: 45%;
  background-color: var(--building-color1);
  position: relative;
  left: 10%;
}

.fb5 {
  width: 10%;
  height: 33%;
  background-color: var(--building-color2);
  position: relative;
  right: 10%;
}

.fb6 {
  width: 9%;
  height: 38%;
  background-color: var(--building-color3);
}
9

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

10

Here is the code snippet FCC provides to be edited:

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

Please format your code.

I tried doing it for you but I believe you reverted it.

12

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

13

Really new and raw when it comes to coding…not sure what you mean.

14

In general, never change lines you are not asked to touch.

15

This is the initial code. What is your additions to the initial code?

16

I tried that and it did not work either. I am so completely confused by this assignment! I only added to the code…was told incorrect, tried shortening code spacing…incorrect…Not sure what I am doing wrong.

17

what is your latest attempt?

18

I still haven’t seen you post what code you added to the original, unaltered CSS for this step. I cannot comment on code you do not post.

19 
    repeating-linear-gradient(
      90deg,
      var(--building-color4) 0% 10%,
      var(--window-color4) 10% 90%
    );
20

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').