Need Help, grid-column: Test failed!

Tell us what’s happening:

The Test failed, i don’t get the pass through. I had written the code and copy and past no match.

Your code so far


<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}

.item5 {
  background: PaleGreen;
  /* add your code below this line */
grid-column: 2 / 4;
  /* add your code above this line */
}

.container {
  font-size: 40px;
  min-height: 300px;
  width: 100%;
  background: LightGray;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}
</style>

<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>

Your browser information:

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

Challenge: Use grid-column to Control Spacing

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-grid-column-to-control-spacing

1 Like

Your code passes the test for me. I am using Chrome browser, what browser are you using?

That code you have passes for me in Firefox, Chrome, Safari, and Edge for me.

I’m running into the same issue. Also, the code above does not work for me and I’m using edge.

This is what im getting back:
// running tests
“item5” class should have a “grid-column” property which results in the “div” with the “item5” consuming the last two columns of the grid.
// tests completed

I had to use Firefox to let it work for me

.item5 {
background: PaleGreen;
/* add your code below this line */
display:grid;
grid-column:2/4;

/* add your code above this line */

}

There is a known Chrome zoom bug with this challenge. Make sure you run the test with the browser at 100% zoom (Ctrl + 0). BTW, this should be fixed, but I guess the site just has not updated yet.

The PR is waiting for one more approval before it gets merged.

@RandellDawson Ah, right. For some reason I thought it had been merged but I can see the PR is still open. Thanks.

Hi there oeaole,

you are all great, thanks for replying.

The answer is, the Browser.

Some Tests only works with Firefox and some only with Chrome.

Maby you have to set it in the coding to fix that bug.

Thanks for help, great peaple.