Submitted 3 months ago

Responsive grid of reviews

Daniele Ercoli•170

@DanieleErcoli243

Preview site View code

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'm proud because I didn't surrender, even though I thought to many times. Next time I would really like to think first to some useful notions.

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

The challenge was to recreate the grid in the largest breakpoints, making the cards of the same height e using classes that were not supposed to work in the small breakpoints. I tried everything I knew before making something similar to the reference.

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

I would like help with creating some specific elements and make them look more like the reference, even though I know that sometimes texts are hard to handle.

Community feedback

Alaa Mekibes•1,540

@alaa-mekibesPosted 3 months ago

🎨 Great work! Here are some suggestions to enhance your design further:

Use CSS Variables

:root {
    --bg-color: hsl(210, 46%, 95%);
    /* Add your other colors here */
}

body {
    background-color: var(--bg-color);
    /* Other properties */
}

Center Your Layout

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bg-color);
}

Icon Positioning Refinement

.quotation {
    background-image: url(../images/bg-pattern-quotation.svg);
    background-position: 85% 0%;
    background-repeat: no-repeat;
}

To get it position like the reference

Size Adjustments 📐

Reduce the profile picture size
Scale down the title for better proportion

Color Enhancement palette

Update the title colors in white boxes to match the reference design

Keep up the excellent work! These small tweaks will make your design even more polished. 💫

Marked as helpful

Daniele Ercoli•170

@DanieleErcoli243Posted 3 months ago

@alaa-mekibes Hi. Thank you so much. It's very helpful and clear. I just applied your suggestions. Thank you again<3

Alaa Mekibes•1,540

@alaa-mekibesPosted 3 months ago

@DanieleErcoli243, your are welcome. Just i forget the align-items: center; on the body, it for make your design on center vertically.

Marked as helpful

Daniele Ercoli•170

@DanieleErcoli243Posted 3 months ago

@alaa-mekibes It looked a little high actually. I'll apply it right away.

Please log in to post a comment

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