Having trouble finding a silly error in my code. I've checked multiple times but can't seem to locate it.
The media query grid-template-areas in my code look like this:
". title title ."
". img-1-title img-2-title ."
". img-1 img-2 ."
". img-3-title img-4-title ."
". img-3 img-4 ."
However, the template displayed in my browser is different:
"img-1 title title img-2"
"img-3 img-1-title img-2-title img-4"
". img-3-title img-4-title ."
Here's the HTML snippet:
<section>
<div class="grid">
<div class="title">Here is a couple of side projects</div>
<div class="img-1-title">A chat app build with socket.io and node.js</div>
<div class="arrow-1"><i class="fas fa-arrow-down"></i></div>
<div class="img-1"></div>
<div class="img-2-title">A responsive mock template of a company build with html css and flexboxgrid</div>
<div class="arrow-2"><i class="fas fa-arrow-down"></i></div>
<div class="img-2"></div>
<div class="img-3-title">Wikipedia search bar connected to the wikipedia API</div>
<div class="arrow-3"><i class="fas fa-arrow-down"></i></div>
<div class="img-3"></div>
<div class="img-4-title">Vanilla js calculator</div>
<div class="arrow-4"><i class="fas fa-arrow-down"></i></div>
<div class="img-4"></div>
</div>
</section>
I had to redeclare my grid-area due to a yellow error in the console when not done. It works fine, but I prefer to avoid errors if possible.
CSS styling:
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"title"
"img-1-title"
"arrow-1"
"img-1"
"img-2-title"
"arrow-2"
"img-2"
"img-3-title"
"arrow-3"
"img-3"
"img-4-title"
"arrow-4"
"img-4";
background: rgb(27, 27, 27);
}
/* CSS continues... */