I finished the Front End Developer Advanced CSS Layout Assessment and on #4 my solution looks exactly as it should, but it shows an error saying > 600px has to have 7,5,8 in the middle.
The instructions said to pay attention to the order, and as I used grid for my solution, I didn’t have to use order for my solution for that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<div data-testid="wrapper">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div id="five">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
body {
background-color: white;
}
div{
display: grid;
gap: 10px;
}
div div{
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
height: 101px;
}
@media screen and (max-width: 600px){
#five{
order: -5;
}
}
@media screen and (min-width: 601px){
div{
grid-template-rows: repeat(4,1fr);
grid-template-columns: repeat(4,1fr);
}
#five{
grid-row: span 2;
grid-column: span 2;
height: 100%;
}
}
/* Add your CSS here */