Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

Hi!
I am working on the Build a House Painting lab and I cannot pass the test 47 “You should set either left or right on your window and arrange them within the house borders”
I have added left to #window-1 and right to #window-2 they render within the border of the house, but the test is not passing.
Any idea why is that?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>House Painting</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div id="house">
        <div id="chimney"></div>
        <div id="roof"></div>
        <div id="window-1"></div>
        <div id="window-2"></div>
        <div id="door">
            <div id="doorknob"></div>
            <div class="panel-container">
                <div class="panel"></div>
                <div class="panel"></div>
                <div class="panel"></div>
                <div class="panel"></div>
                <div class="panel"></div>
                <div class="panel"></div>
            </div>
        </div>
    </div>
</body>
</html>

/* file: styles.css */
#house{
  position: relative;
  width: 500px;
  height: 400px;
  background-color: LightGray;
  margin: 100px auto;
  border: 2px solid grey;
}
#house div{
  position: absolute;
}
#roof{
  width: 110%;
  height: 150px;
  top: 0;
  left: -5%;
  /* background-color: darkred; */
  border: 3px solid black;
    background: linear-gradient(
      darkred 30%,
      FireBrick 60%,
      maroon 100%
    )
    0px 0px / 20% 40%;
}
#door{
  width: 100px;
  height: 180px;
  bottom: 0;
  left: 50px;
  background-color: forestgreen;
  border: 5px ridge rgba(11 55 20 / 0.6);
}
#doorknob{
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 85px;
  right: 15px;
  border-radius: 50%;
  background-color: DarkGoldenRod;
  z-index: 1;
}
.panel-container{
  position: absolute;
  width: 90%;
  height: 90%;
  top: 0px;
  left: 0px;
  margin: 9px 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}
.panel{
  position: static !important;
  box-sizing: border-box;
  width: 45%;
  height: 30%;
  padding: 10px 5px;
  background-color: forestgreen;
  border: 8px ridge rgba(111 155 20 / 0.6);
}
#window-1{
  width: 80px;
  height: 100px;
  bottom: 80px;
  left: 200px;
  background-color: CornflowerBlue;
  border: 5px solid Gray;
}
#window-2{
  width: 80px;
  height: 100px;
  bottom: 80px;
  right: 60px;
  background-color: CornflowerBlue;
  border: 5px solid Gray;
}
#chimney{
  width: 13%;
  height: 50px;
  top: -50px;
  left: 10%;
  border: 3px solid DimGrey;
  z-index: -1;
  background: linear-gradient(
      Gray 30%,
      LightGray 80%,
      Gray 100%
    )
    0px 0px / 100% 40%;
}
/* Background styling*/
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(#b3e6ff, #80d4ff 60%, green 60%, #006600 100%);
}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

Something I noticed is that when I was resizing the preview on the horizontal axis the right-side window is moving while the left side windows is fixed in place.

3

It does that, because the right window is “fixed” to the right side of the house, so when the house is getting smaller and the right edge of the house moves toward left edge of the viewport, the right window (#window-2) moves with that right edge of the house.

I have also tried fixing the #window-2 to the left edge by giving it “left” value instead of “right”, but it still doesn’t pass the test 47.

4

You won’t believe how I found the solution.

I won’t say it here but instead of putting one or the other try putting both the right and left

5

That worked. Thanks :slight_smile:
Although the logic is not logicing :stuck_out_tongue:

6

I’ll report this problem with the fCC GitHub.

7

Hi @LrdCaptainHelmer ,

The GitHub issue should be that your hack passed the tests.

The actual issue is here:

Does it make sense to set the display to flex when the house elements are positioned absolutely relative to the house?

8

I see. I didn’t even notice it.

9

So wouldn’t my “hack” be considered a “bug” that needs to be fixed? Or is it something else or nothing?

10

Yes. I think the GitHub issue is warranted if indeed the tests passed when both left and right positioning was added to the window selectors and nothing else in the code was changed. I think that should be looked into. Thank you for helping to make fCC better!

11

You’re welcome
It’s the least I can do