OpenProblem : 254939

[ARiYaNSEp0-0]

This challenge require CSS flex-box and grid layouts. my code passed two test cases but failed one for grid layout I don't know what is the problem with my grid part :

h1 {
  text-align: center;
}

.building {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* media query here */
@media (max-width: 768px) {
  .building {
    flex-direction: column;
  }

  #seats-area {
    order: 2;
  }

  #contest-area {
    order: 1;
  }
}

.seats {
  position: relative;
  width: 360px;
  height: 360px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 10px;
}

.persons {
  width: 360px;
  height: 360px;
  position: absolute;
  /* Your code here */
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  justify-content: space-between;
  gap: 60px 10px;
}

.seat {
  width: 60px;
  height: 60px;
  background-color: lightgreen;
  border: 2px solid #333;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filled {
  background-color: gray;
}

.person {
  cursor: pointer;
  width: 50px;
  height: 50px;
  margin: 5px;
  background-color: green;
  border-radius: 100%;
  border: 2px solid #000;
}

.js-person {
  opacity: 1;
  background-color: orange;
}

.python-person {
  opacity: 1;
  background-color: dodgerblue;
}

.contest-container {
  background-color: #eee;
  display: grid;
  /* Your code hehre */
  grid-template-columns: repeat(5, minmax(30px, 90px));
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  padding: 20px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.item {
  font-size: 12px;
  padding: 4px;
  /* Your code hehre */
  display: grid;
  place-content: end;
  border: 1px solid #333;
  border-radius: 2px;
}

.js {
  background-color: orange;
  /* Your code hehre */
  grid-column: 3 / 3;
  grid-row: 1 / 3;
}

.python {
  background-color: dodgerblue;
  /* Your code hehre */
  grid-column: 1 / span 1;
  grid-row: 2 / 5;
}

.stage {
  background-color: gray;
  /* Your code hehre */
  grid-column: 1 / 3;
  grid-row: 1 / 1;
}

.laravel {
  background-color: coral;
  /* Your code hehre */
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}

.rest {
  background-color: pink;
  /* Your code hehre */
  grid-column: 4 / 6;
  grid-row: 2 / 3;
}

.staffs {
  background-color: teal;
  /* Your code hehre */
  grid-column: 3 / 5;
  grid-row: 3 / 4;
}

.data {
  background-color: lightblue;
  /* Your code hehre */
  grid-column: 5 / 6;
  grid-row: 3 / 5;
}

.extra {
  background-color: purple;
  /* Your code hehre */
  grid-column: 2 / 5;
  grid-row: 4 / 5;
}

and here is test results :

Test finished successfully

score = 65000 / 100000
    should have correct persons flexbox layout PASS
        test score ratio: 35/100
        test time: 0.177
    should have correct contest-area grid layout FAIL
        test score ratio: 35/100
        test time: 0
    should change layout based on the media query PASS
        test score ratio: 30/100
        test time: 0.076

[HamidMolareza]

I don't know. I've reviewed the codes and tried several approaches. They seem correct in practice, but probably Quera's judging system is looking for a special approach that is not well mentioned in the description.

Quera’s general support usually doesn’t respond in these cases, either.

[ARiYaNSEp0-0]

I don't know why they implement tests like this or why they don't give enough information about correct approaches because this is CSS there is unlimited ways to get that same result or layout