Testimonials Section - CSS Grid, mobile-first, responsive

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted about 2 years ago

  Hey @corjon, some suggestions to improve you code:

  • The profile images Alt Tags need to be improved. It should state the following; “Headshot of -person’s full name-“

  • 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 and give you full control of it.

  Here is how it looks like fully implemented: EXAMPLE

  Desktop View Code:

  .testimonial-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas:
        "daniel daniel jonathon kira"
        "jeanette patrick patrick kira";
      gap: 30px;
    }
  
    .daniel-card {
      grid-area: daniel;
    }
    .jonathan-card {
      grid-area: jonathon;
    }
  
    .jeanette-card {
      grid-area: jeanette;
    }
  
    .patrick-card {
      grid-area: patrick;
    }
  
    .kira-card {
      grid-area: kira;
    }
  

  Happy Coding! 👻🎃

  0