Learn CSS Variables by Building a City Skyline - Step 21

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

** 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.

Test

Sorry, your code does not pass. Don’t give up.

Hint

You should add two new div elements after the .bb4 element.

**WTH!!???
It asks for 2 empty ‘div’ elements to the top of the “background-buildings” element and 2 below it; DONE.
It asks for 1 ‘div’ element between .bb3 and .bb4; DONE

Nowhere in Step 21 does it say to place 2 ‘div’ elements below .bb4.

  **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; rv:104.0) Gecko/20100101 Firefox/104.0

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

Link to the challenge:

I ended up figuring it out.
Someone needs to go into the lesson and fix the typos so that others aren’t getting jammed up.

1 Like

Can you expand a little more on what you consider to be the typos? Or how you would rephrase the instructions to make them clearer?

I don’t think there is any typos, though I can see how maybe someone could misinterpret ‘bottom’ of the background buildings element.

the adding one more div in between .bb3 and .bb4 is pretty straight forward; but when you’re reading that you need to place two div elements on top and another two at the bottom of another element kinda jams you up if you take the text literally :sweat_smile: :rofl:

Everyone has their own opinion of what ‘literally’ means.

Expanding the word ‘it’ give the literal meaning above, though I can see how some people would struggle to correctly refer to the correct meaning of ‘it’

So when you first read Step 21, was your first interpretation?
Two more “div” elements below “background-buildings”?
Or would it be two more div elements nested _________?
I just want to get the proper terminology/work flow that’s all.

My first impression was to interpret ‘it’ as the last noun, which was the background buildings element. From there, I interpret the text ‘at the bottom of it’ as inside of the div instead of below the div.

Which is how I figured it out…
I just assumed that it would say inside the div instead of below the div.
Just seems like it would make more sense… but clearly you’ve obviously to been coding for quite some time for you to know the difference off hand.
Thanks for the reply though.

Maybe I’m missing something, but I don’t see where it says below the div?

It’s a long sentence that might be able to be broken down (though I’m not sure how) but I think it is accurate.

it actually says the bottom of it.
No worries, I just have to take more time and double check all my work.

The same annoying Situation I also have. Luckily i was able to found it on my own.

Where it says add two at the TOP.
You should:
Add Two under the background-buildings Element right before .bb1 class. Two after .bb4 class and One between bb3 and bb4.

1 Like

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.

solution is remove the empty div from above background-buildings div .
so you assume wrong you should only add empty div within background-buildings div
As you can see in the code

Mod Edit: SOLUTION REMOVED

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like