Help with step 51, please. :D Learn CSS Variables by Building a City Skyline

I am completely lost. I am stuck at step 51. I have tried reformatting my code and it won’t work. I have researched other peoples code to see if mine matched and it does. I’m stumped.

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

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

I’m noticing that you might have accidentally removed the .bb3 selector on the rule set below and perhaps delete the background-property as well. It’s tough to tell without looking at all of your CSS code in proper format. But accidentally making changes like that will keep you from passing the tests a lot of time.

Oh ok! I’m new to posting. Thank you for informing me. I want to do things the right way.

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

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

Those double dashes before the custom variable names are not actually ascii double dashes. I’m not sure if you just copy/pasted from your original post or if this is actually the CSS you are using? If it is then you need to fix the dashes in your custom variable names. Make sure they are the plain old dash character on your keyboard.

Also, it is always a good idea to paste in your complete CSS file just in case you accidentally made a change somewhere else.

That’s the CSS that I am using. Oh Ok. I didn’t know about the ascii double dash. Ok I’ll fix it and see if that helps.

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

* {
  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;
}

/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.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%;
  background-color: var(--building-color2);

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

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

.bb4 {
  width: 11%;
  height: 58%;
  background-color: var(--building-color4);
}

/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
.fb1 {
  width: 10%;
  height: 60%;
  background-color: var(--building-color4);
}

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

I think maybe I made a change somewhere else. I don’t know. I put in regular dashes and it’s still wrong.

You need to show us your updates. And by that I mean all of your CSS with the updates included.

Ok now I passed the test. I deleted the first half of the window color variables then re-entered the text.

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

what have you deleted exactly?, I´m having the exact same problem, I have already done everything I supposed to do with the “background: linear-gradient…”, but it is still askingme to add a background property.
I don´t know what I have to do at this point.

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.