Build a House Painting - Build a House Painting

HTML-CSS
1

Tell us what’s happening:

Failed:42. Your windows should be placed below your #roof and at least higher than one third of your #door’s height.

My windows are small because i dont understand, ive been messing with various ratios and i definitely meet the minimum 1/3 requirement for this… someone please help ive bene stuck for two days

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>
    </div>
</body>
</html>

/* file: styles.css */

#house {
  position: relative;
  width: 500px; height: 400px;
  background-color: skyblue;
  border: 2px solid black;
  max-width: 100%;
  max-height: 100vh;
  margin-top: 100px;
}

#house div {
  position: absolute;
}
#roof {
  top: 0;
  width: 100%;height: 60px;
  background-color: brown;
  border: 1px solid transparent;
  position: absolute;
  z-index: 2;
}

#door {
  position: absolute;
  background-color: black;
  border: 2px solid transparent;
  width: 70px; height: 100px;
  bottom: 0;
  right: 190px;
  left: 190px;
}

#window-1 {
  position: absolute;
  background-color: grey;
  border: 1px solid black;
  width: 70px; height: 40px;
  top: 150px;
  left: 80px;
}

#window-2 {
  position: absolute;
  background-color: grey;
  border: 1px solid black;
  width: 70px; height: 40px;
  top: 150px;
  right: 100px;
}

#chimney {
  z-index: -1;
  width: 70px; height: 80px;
  background-color: black;
  border: 1px solid transparent;
  position: relative;
  top: -80px;

}

Your browser information:

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

Challenge Information:

Build a House Painting - Build a House Painting

2

Not really sure why, but the test expects the windows to also have a bottom property. If you set that on both windows with the same value as the top it passes the tests.

Issue:

3

so i had figured it was something like that and tried to put a top and bottom, and its still failing me… This is the only step i need too.. Anymore tips perhaps?

4

it doesn’t expect a bottom property, the tests use getComputedStyle, all for top bottom left right are part of the computed style of the element indipendently by what is given as css properties. The issue here is a different one

5

do not use relative units. Notice that if you resive the preview to be shorter the house changes size, you don’t know the size of the viewport when the tests are run, you should do everything in px

6

I’m still not clear on how max-height: 100vh is breaking this test. The numbers produced by the test are the same with and without it, but it fails with it?

All I know is, I just added bottom: 150px to both windows and it made the test pass. But so does removing max-height.

Anyway, as I said in the issue, this seems like the wrong way to measure the relative position of elements.

7

if 100vh is equal to 800px or to 100px, some things move around

8

I’m still not sure if I get it. Why would running the tests affect the viewport height?

Shouldn’t the viewport height/width the test “sees” be the same as the preview? If it isn’t, that seem like it could cause issues.

9

and it’s causing issues like in this situation

I do not have experience working on the test runner

maybe the lab could have added tests to use only px

10

thank you so so much, it took me a little bit to figure out what you were telling me but i looked back at it today thank you