Learn CSS Variables by Building a City Skyline - Step 21

HTML-CSS
1

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:

2

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.

3 Likes
3

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?

4

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

5

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:

6

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’

7

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.

8

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.

9

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.

1 Like
10

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.

11

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

12

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.

7 Likes
13

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

2 Likes
14

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
15

A post was split to a new topic: Building a City Skyline - Step 21 - suggestions for improvements

16

I ran into the same issue,they need to fix this TYPO because the grammar is definitely incorrect, making the lesson extremely annoying…

1 Like
17

yes,there are no “typos” but the grammatical errors in this lesson make it difficult to interpret, literally does not ask the coder to put elements after .bb4, the way it is worded literally asks to add two at the bottom of .background-buildings. It needs to be changed.

18

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.

At bottom of the div is literally after the .bb4.

I don’t love the wording either, but it is literally accurate.

19

it isnt accurate at all… “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 .” It never asks to put anything after bb4, at all. it asks to put two empty divs at the top of background buildings ,two more at the bottom of it,… When it says “two more at the bottom of it” ,“it” refers to background buildings, because “background buildings” is the noun that was previously used/introduced. You can not use “it” to refer to a noun which has not been introduced yet, which is what happened with this issue, the correct grammar would be " Squeeze them together by adding two empty div elements to the top of the .background-buildings element, two more at the bottom of .bb4, and one more in between .bb3 and .bb4 . Also multiple people have complained about this issue so maybe its just obvious that it is not accurate and needs to be fixed.

1 Like
20

How would you rewrite it?