Skip to content
Submitted about 2 years ago

Testimonials using Grid, flex and BEM

Emmiecodes•100
@Emmiecodes
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

I found setting the whitespace around the grid container hard without making some articles disappear or overflow on the page. Deleting some max-height properties and setting my media query to rem instead of max 480px helped with that but I don't feel fully confident with adding padding/margin in grid yet.

Another thing I had trouble with was letting the review paragraphs start all inline of eachother. Finding the right rem font size for the headers so they all would take up 3 lines helped. Yet I have not yet managed to let the text end on the same line like the example given.

Questions I have:

  • Is my BEM-notation correct? This is my first non-card project using it and it came in handy.
  • Do the margins/paddings look good on your screen without any overflow / hidden parts issues?
  • Are there ways I could improve the accesibility?

Aside from that, any other ways I could improve this solution are more than welcome. ☺

Community feedback

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

    👾Hello @Emmiecodes, congratulations on your new solution!

    Great code and great solution! I did this challenge too and know how hard it is to set up this grid layout. I think you've done a really good job building everything! Here are some tips for you:

    1.You've missed the color for the background, in this case is background-color: #EDF2F8 and add it to the body.

    2.You’re in the right track I can see that you’ve used the majority semantic tags possible for this challenge, the only block you’ve missed is the paragraph containing the quote text you can improve the accessibility there using <blockquote> to indicate to screen readers that the content inside that paragraph is a quote.

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Emmiecodes•100
    @EmmiecodesPosted about 2 years ago

    @correlucas Thank you for your suggestion about the blockquote. I was not aware of that element and will keep it in mind to change later. I just quickly tried using it and adjusting the margin left / bottom but even when I set the margin-bottom to 0 the layout changes and leaves a lot of white space in some articles/reviews on the bottom. (Edit: worked when setting both padding and margin to 0, in case that might help someone reading this in the future)

    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