Responsive Four Card Feature Using CSS Grid

Hey @Tunde-webdev, some suggestions to improve you code:

• The heading is one single heading so the entire thing should be wrapped in a single <h1> Heading along with a Span Element.

• Remove the following code. It is cause your header paragraph to warp as soon as the screen shrinks.

#p_head {
    margin-left: 28rem;
    margin-right: 28rem;
}

• You want to add a third layout to make the transition from mobile 📱 -> desktop 🖥 views smoother.

• Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout; it will give you full control of the layout.

Here is an example of how it works: EXAMPLE

.card-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      "supervisor team calculator"
      "supervisor karma calculator";
  }

  .karma-card {
    grid-area: karma;
  }

  .calculator-card {
    grid-area: calculator;
    align-self: center;
  }

  .team-card {
    grid-area: team;
  }

  .supervisor-card {
    grid-area: supervisor;
    align-self: center;
  }

Happy Coding! 👻🎃