Four cards feature section

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @StevenGerman, some suggestions to improve you code:

  Using CSS Grid with Grid-Template-Areas will make things way easier when building the layout. Not only will it reduce the amount of code needed but it will give you full control of the layout.

  .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! 👻🎃

  Marked as helpful

  0
• 

  Phoenix243•310

  @PhoenixMputuPosted about 2 years ago

  Sorry if my English is not correct, I am French -speaking. Very good solutions, but the mobile version is not centered. In the mobile version you did not resize your columns and positions your cards to be centered. You were satisfied with a margin: Auto, which is not a good idea. You could also make it simple with the flexbox. And also uses sematic tags and the BEM convention.

  Marked as helpful

  0