CODEWITHSUNDEEP
htmlcssgrid-layout
Johnny
Johnny

Reputation: 3

CSS Line will not span over 4 columns

I have al grid containing the grid-item. Everything works great but saddly I can't get the line the span over the whole width of the intro class. The line is only showing under the first column.

I hope you can help me in the right direction.

@media(min-width:768px) {
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .intro {
    display: grid;
    grid-template-columns: 75px 1fr 1fr 75px;
    grid-gap: 10px;
  }
  .grid-item:nth-child(1) {
    grid-column: 2 / 3;
  }
  .grid-item:nth-child(2) {
    grid-column: 2 / 3;
  }
  .grid-item:nth-child(3) {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
  }
  .grid-item:nth-child(4) {
    grid-row: 2 / 3;
    grid-column: 3 / 4;
  }
  .inleiding .line {
    grid-row: 5;
    grid-column: 2 / 4;
  }
}
<article class="intro">
  <h2 class="grid-item">WWE</h2>
  <p class="grid-item">WWE, afkorting .....</p>
  <h2 class="grid-item">Wat is er met de WWF gebeurd ?</h2>
  <p class="grid-item">Het bedrijf .....</p>
  <div class="line"></div>
</article>

Upvotes: 0

Views: 55

Answers (1)

Ahmad Othman
Ahmad Othman

Reputation: 141

In you CSS you are selecting the line using

.inleiding .line { ...

and I think this is what's causing the problem, just remove the .inleiding selector.

Upvotes: 1

Related Questions