Testimonial grid section main

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="grid-container"> with the main tag To center .grid-container add display: grid; align-items: center; Justify-items: center; to the body instead display: flex; and it properties.

  Increase the padding right and left values for .card1, .card2, .card3, .card4, .card5 .card1, .card2, .card3, .card4, .card5{ padding: 1.5rem 2.5rem} Hope am helpful You did a good job , well done. HAPPY CODING

  Marked as helpful

  0

  ---

  

  ANDRES•180

  @t0ntinPosted almost 2 years ago

  @Hassiai Hi. Thanks for your reply. Are you saying that to center the content, I should use display:grid, etc on the body? I had more padding before, but I decreased it because it made everything too wide.

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @t0ntin increasing the padding right and left values of the cards won't make everything wide .

  0

  

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  @t0ntin increasing the padding right and left values of the cards won't make everything wide .

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The profile images are not decorative. Their alt tags should not be blank. It should state the following; “Headshot of -person’s full name-“

  More Info:📚

  Headshot Alt Text

  • The names of each individual are headings so they should be wrapped in a Heading Element. Since they are all equal level of importance, the h2 heading will be the best choice.

  • To improve the semantics of your component, you will want to wrap each individual testimonial component in a Figure Element, the individuals information should be wrapped in a Figcaption Element and lastly, the testimonial itself should be wrapped in a Blockquote Element.

  Code:

  <figure>
     <figcaption></figcaption>
     <blockquote></blockquote>
  </figure>
  

  More Info:📚

  MDN Figure Element

  • The attribution should be wrapped in a footer element.

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  0

  ---

  

  ANDRES•180

  @t0ntinPosted almost 2 years ago

  @vcarames

  Can I still leave the <p> tags inside the figcaption, blockquote elements?

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @t0ntin

  You won’t need it anymore since those elements describe what it is.

  The figcaption is the title/what it is.

  The blockquote is the testimonial.

  This how the MDN website example did theirs:

  <figure>
    <figcaption><b>Edsger Dijkstra:</b></figcaption>
    <blockquote>
      If debugging is the process of removing software bugs, then programming must
      be the process of putting them in.
    </blockquote>
  </figure>
  

  0