Skip to content
Submitted over 2 years ago

@traez's Social proof section using HTML and CSS

Trae Zeeofor•490
@traez
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Apologies to my future self for turnaround time delays.
I eventually got to use CSS Grid for first time on frontendmentor.io as differentiated from FlexBox.
I must say it's a very powerful tool, and it excites me. Looking forward to using it more extensively.

Short falls:

  1. Another media query actually due between mobile and full desktop view but I'm tired much.
  2. Also could put more effort into item sizing to make clone exact copy.
  3. "Rated 5 stars" background also to be clipped and not spanning full width.
  4. Verified Buyers also shouldn't all be on straight row.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Trae, congratulations for your solution!

    I fixed the position for your rating sections, I did a test with the 3rd, you need to fix some padding issues but the concept to move each section separately is here in the code below:

    Basically you've to use a different padding for top/bottom and a bigger padding for left/right and use this property to move the single rating section transform: translateX(80px);

    @media (min-width: 37em)
.starrated3 {
    transform: translateX(80px);
    display: flex;
    /* justify-content: flex-end; */
}
@media (min-width: 37em)
.star-rated {
    padding: 15px 30px;
}

    If you want to use my solution as a reference for code and layout, here's the link:

    https://www.frontendmentor.io/solutions/testimonials-grid-section-vanilla-css-focus-effect-custom-design-e5bIzU3vZN

    Hope it helps and happy coding!

    Marked as helpful
    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