Submitted over 3 years ago

Beginner: Social proof section

Nishant Jain•20

@NJain0001

Preview site View code

This is a solution for...Social proof section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

One of the things that I struggled with was the star section on the desktop version. It feels like the stars and the message aren't lined up properly, and the code around that piece felt "hacky". I was using positioning and display inline-block which felt wrong. If there is a better way, can you point me in the right direction?

Community feedback

Vinci Taylaran•185

@vincitaylaranPosted over 3 years ago

Great look solution, Nishant!

In regards to the solution to your problem with the stars, I went with giving your .star-rating-item class a flexbox and then aligned them using align-items: center. I removed all of the styles for your .stars class and replaced them a grid, gave it a grid-auto-flow: column property, and then gave them a gap of 3px.

.star-rating-item {
    position: relative;
    width: 450px;
    height: 25%;

    display: flex; // <-- Gives this class flexbox.
    align-items: center; // <-- Aligns your elements vertically. Must have flexbox in order to use this property.
}

.stars {
    display: grid;
    grid-auto-flow: column;
    gap: 3px;
}

Other than that, your solution is great. Looking forward to seeing your progress and congrats on completing your second challenge 🎉

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