Konrad
November 24, 2019, 8:02am
1
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
pjonp
November 24, 2019, 8:19am
2
Your code passes the test for me. I am using Chrome browser, what browser are you using?
six03
November 25, 2019, 4:47am
3
That code you have passes for me in Firefox, Chrome, Safari, and Edge for me.
Strett0
November 25, 2019, 4:56am
4
I’m running into the same issue. Also, the code above does not work for me and I’m using edge.
Strett0
November 26, 2019, 3:27am
5
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
Strett0
November 27, 2019, 9:35pm
6
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 */
}
lasjorg
November 28, 2019, 2:58am
8
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.
lasjorg
November 28, 2019, 3:12am
10
@camperextraordinaire Ah, right. For some reason I thought it had been merged but I can see the PR is still open. Thanks.
Konrad
November 28, 2019, 6:07am
11
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.