Skip to content
Submitted 8 months ago

Responsive testimonials page using Grid

Meseriasul19•100
@Meseriasul19
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I've learned a lot of things working with grid.

What challenges did you encounter, and how did you overcome them?

I've had problems with quote image, i didn't know how to place it in correct position, but finally i resolved it.

What specific areas of your project would you like help with?

If you can give me a feedback about the technics I used and the clarity of the code would help me a lot.

Community feedback

  • lij110397•230
    @lij110397Posted 8 months ago

    The solution of desktop looks almost the same as the design! The code is very neat and includes what the design needs! **For improvement: ** 1. Here you use <b> on verified graduate, however in the design it is not bolded. This semantic label is to strength some information.

    <b>Verified Graduate</b>

    2.When the screen's size is changing, the class of "card-text" is sketched. The avatar is distorted.

    .avatar {
    border-radius: 50%;
    width: 3rem;
    margin-right: 1.5rem;
}

    Using margin-right here may be the problem to cause the distortion. Instead, you can try to add gap and set "align-items" and "justify-content" in your flex box layout. 3. For .card-Daniel, .card-Jonathan, .card-Jeanette, .card-Patrick, .card-Kira, they share some same feature. It may be a better way to define a common class for them, such as "card"

    <div class="card daniel">
<div class="card jonathan">
    Marked as helpful
    0
    Meseriasul19•100
    @Meseriasul19Posted 8 months ago

    @lij110397 Thank you very much for the feedback!!!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord