Learn CSS Variables by Building a City Skyline - Step 21

Tell us what’s happening:
Describe your issue in detail here.

This is what STEP 21 asks for:

Step 21

The buildings are too spaced out. Squeeze them together by adding two empty div elements to the top of the .background-buildings element, two more at the bottom of it, and one more in between .bb3 and .bb4. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center.

I did it exactly what it’s asked but still couldn’t pass.

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></div>
    <div></div>
    <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>
  </body>
</html>
/* file: styles.css */
* {
  border: 1px solid black;
  box-sizing: border-box;
}

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

.background-buildings {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #aa80ff;
}

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

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

.bb3 {
  width: 10%;
  height: 55%;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

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

Link to the challenge:

how many new element divs did you add?

They want 5 new ones

But, it’s not mentioned in the task.

Let’s count together…

adding two empty div elements to the top
two more at the bottom
and one more in between

that’s 5?

I already did. Didn’t you check the code I provided?

    <div class="background-buildings">
      <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 class="bb4"></div>
    </div>

The above is the original code.
There are 11 lines of code total.

Here is your code:

It has 14 lines of code total.

So as I asked already. How many divs did you add.
You need to add 5. (total lines of code should be 16)

Here’s missing 2 divs which adds up to 16.

ah i see the misunderstanding.
the ‘top’ does not mean ‘above’
It means add the divs inside and at the top
(bottom means add inside and at the bottom)

1 Like

Did that too. Still doesn’t work.

do you have new code? if yes please share.
(remember, the total number of divs added inside should be 5)

Why don’t you show me how to get this done by sharing your code? I literally did anything, but still couldn’t pass.

I asked first? (please share your code and I will let u know what you have missed)

remember, 2 at the top, 2 at the bottom and the one in the middle

1 Like

Okay I got it done, thanks for helping out.

1 Like