TESTIMONIAL-GRID-SECTION

Community feedback

• 

  Amos•470

  @fisttyPosted about 2 years ago

  Hi. I see that the border on the images are all purple; the original design has only Daniel Clifford border and Partick Adams with borders. The color of Daniel Clifford's border is the color of his "Verified Grafuate".

  Marked as helpful

  0

  ---

  

  Oyindamola•280

  @OyinaladePosted about 2 years ago

  @fistty Thanks

  1

  

  Suraj Raju Hadage•690

  @SurajHadagePosted about 2 years ago

  @Oyinalade :D

  0
• 

  Suraj Raju Hadage•690

  @SurajHadagePosted about 2 years ago

  I would suggest to take <main> tag to wrap every <article> tag. Then

  body {
      display: grid;
      place-items: center;
  }
  

  Do not give width or height to <main> Or <article> tag. Instead use accurate padding using Paint app. Every article should have class="grid-item-1" and so on. <main> tag is Grid container Use

  main {
      max-width: 1120px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, min-content);
      gap: 30px;
  }
  

  To make your HTML even more shorter, Structure your <article> Tag like :

      <article class="grid-item1">
        <div class="card-head">
          <img>
          <div class="card-user">
            <span  class="name">Daniel Clifford</span>
            <p class="title">Verified Graduate</p>
          </div>
        </div>
        <h2 class="card-head">
        </h2>
        <p class="detailes">
        </p>
      </article>
  

  Your solution is pretty cool by the way. Happy coding.

  Marked as helpful

  0

  ---

  

  Oyindamola•280

  @OyinaladePosted about 2 years ago

  @SurajHadage Thank you

  0