Skip to content
Submitted about 3 years ago

Mobile-first solution using SCSS, BEM, and Flexbox

Vicktor•900
@Victor-Nyagudi
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

I normally avoid setting a height on anything, especially not using absolute units like px, but I needed to increase the size of the bottom container housing the reviewers' feedback.

I'm aware using padding increases the size, but you can't use align-items or align-self property of flexbox to align the items at the start, middle, or center of the container because its content-box would still be the same size.

Are there better alternatives to setting a height when you don't have the Figma files?

Also, I wasn't sure why the background images were split into top and bottom or where the cutoffs were, so I ended up going with the halfway point of my content as the splitting point.

Community feedback

  • Ken•4,915
    @kens-visualsPosted about 3 years ago

    Hey @Victor-Nyagudi 👋🏻

    I have some feedback about background-image and some other minor things.

    • Add these three lines in body to fix the background:
    background-repeat: no-repeat;
background-size: contain;
background-position: center;

    and background-image should only be in body, in this case, so you have to remove background-image from everywhere else.

    • Next, for the star icons, add aria-hidden="true" to all of them, because they're for decorative purposes only. You can read more about aria-hidden here.

    I hope this was helpful 👨🏻‍💻 your layout looks great, it seems like you got a really good hang of CSS Flexbox. Cheers 👾

    Marked as helpful
    2
  • Vicktor•900
    @Victor-NyagudiPosted about 3 years ago

    Thanks. I wasn't sure why the images were split in the first place. Thanks again for the decorative image insight too. I'll implement that going forward.

    0
  • Vicktor•900
    @Victor-NyagudiPosted about 3 years ago

    I've seen the accessibility report and will be implementing the recommendations in future projects.

    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