Learn CSS Variables by Building a City Skyline - Step 40

I can’t even describe the problem

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">    
<head>
  <meta charset="UTF-8">
  <title>City Skyline</title>
  <link href="styles.css" rel="stylesheet" />   
</head>

<body>
  <div class="background-buildings">
    <div></div>
    <div></div>
    <div class="bb1">
      <div class="bb1a"></div>
      <div class="bb1b"></div>
      <div class="bb1c"></div>
      <div class="bb1d"></div>
    </div>
    <div class="bb2"></div>
    <div class="bb3"></div>
    <div></div>
    <div class="bb4"></div>
    <div></div>
    <div></div>
  </div>

  <div class="foreground-buildings">
    <div></div>
    <div></div>
    <div class="fb1"></div>
    <div class="fb2"></div>
    <div></div>
    <div class="fb3"></div>
    <div class="fb4"></div>
    <div class="fb5"></div>
    <div class="fb6"></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>
/* file: styles.css */
:root {
--building-color1: #aa80ff;
--building-color2: #66cc99;
--building-color3: #cc6699;
--building-color4: #538cc6;
--window-color1: black;
}

* {
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%;
height: 10%;
background-color: var(--building-color1);
background: 
}
.bb1b {
width: 80%;
height: 10%;
background-color: var(--building-color1);
}

.bb1c {
width: 90%;
height: 10%;
background-color: var(--building-color1);
}

.bb1d {
width: 100%;
height: 70%;
background-color: var(--building-color1);
}

.bb2 {
width: 10%;
height: 50%;
background-color: var(--building-color2);
}

.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);
}
  
  **Your browser information:**

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

Challenge: Learn CSS Variables by Building a City Skyline - Step 40

Link to the challenge:

I wanted to post a laughing reaction because the way I imagined you said “I can’t even describe the problem” just sounded hilarious in my head! :grinning:

Then I became worried you would think I was laughing at your predicament! So let me instead try and help…
(keep in mind though, sometimes it is a clue to us that we don’t understand something if we cannot describe it… you may want to use this as a kind of hint in itself)

ps. I am going to take a look at your code soon…

so far you have the correct background property defined.
One step down…

Here’s a hint for you on how to proceed.
Whenever you see an FCC exercise give you a block of syntax like this:

gradient-type(
  color1,
  color2
);

understand that you are being given a template to use in the exercise. So it is perfectly fair as a 2nd step (for eg) to copy and paste this whole template into the background property.

But don’t stop there.

Step 3 : the template says that we need a “gradient-type”
And the instructions following the template say:

add a gradient of type linear-gradient

Ah-ha! the template has a placeholder called “gradient-type” and the instructions also mention a gradient of type! At this point, it is perfectly correct to replace the template’s placeholder “gradient-type” with the name of the gradient we want to make. (linear-gradient)

What do you think then, the next step is?
(recall again, the syntax block is a template)

I’ve applied background but it still doesn’t work. I am just lost now.

How did you apply your background?

This is how I applied it:
background: linear-gradient(
–building-color1,
–window-color1
);

There is a way to call a variable.

This is how you call a variable
var(--nameOfVariable)

If you declare variable like this in :root

:root{
  --primary-color: #ff0000;
}

Then if you want to use it later in another part of the code, you call the variable like this

div {
  color: var(--primary-color); /* 👈 focus on this part */
}

More info → Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN

Hope this gives you an idea how to use variables in CSS

Good try.

But do you think you are referencing the variables correctly?

i’m lost, i’m just confused right now

Hi @olaosilajaolasubomi, which part are you confused with?

This is your code so far.
It is almost correct but you have not referenced the color variables correctly.

What I mean by that is, in the stylesheet you are currently working on, the following block of code contains some color variables, but to use these, you must refer to them with a special syntax.

The correct syntax to reference a variable from this block is

 var(—building-color4)

Thank you so much
Ive found the error

1 Like

Regardless of syntax, this step does not work correctly on all browsers and OS. It even gives the wrong error message. It says:

You should apply a background to .bb1a.

although the preview shows the gradient has been applied.

I ran into a similar step before on the CatPhotoApp using safari on my iPad. When I switched to chrome on my iMac it worked fine.

Have you tried using chrome on your iPad?

CSS wise, it should be accepted on most browsers (including safari)
source: CSS Variables (Custom Properties) | Can I use... Support tables for HTML5, CSS3, etc

but with freecodecamp, there is some known issue on some specific browser the user is using.