Frontend Mentor | Testimonial grid section main coding challenge solution

Community feedback

@Hassiai

Posted 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

ANDRES• 180

@t0ntin

Posted 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.

Hassia Issah• 50,670

@Hassiai

Posted almost 2 years ago

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

Hassia Issah• 50,670

@Hassiai

Posted almost 2 years ago

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

バレンタイン 😈• 64,190

@VCarames

Posted 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!🎄🎁

ANDRES• 180

@t0ntin

Posted almost 2 years ago

@vcarames

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

バレンタイン 😈• 64,190

@VCarames

Posted 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>

Testimonial grid section main

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community