Testimonials Grid Section

Community feedback

• 

  P

  Ian Parker•200

  @i-prkrPosted 3 months ago

  This is a great solution and I have enjoyed looking at how you have used Sass and BEM, as I begin to get familiar with them myself. I was quickly able to see how mine could be improved so thank you!

  I cannot think of anything that I would suggest to change, however I did notice in the medium screen size layout the bottom card has a large amount of space on the bottom. I tried applying display: flex and justify-content: space-around or justify-content: space-between on the .testimonial class. It helped correct the space but does alter the look of the cards a little - what do you think? Is there another approach you would take instead?

  I also when doing this challenge came across this article that I used to help apply the different background colours: https://blog.favouritejome.dev/lets-build-a-multi-coloured-card-component-using-sass. I'm curious as to what you think! Particularly as while this solution may mean there is less code, I really like how your solution is very easy to read according to the BEM methodology.

  Thanks for a great solution I really enjoyed looking at it!

  0

  ---

  

  P

  Sergei Borja•980

  @wonderlust101Posted 3 months ago

  @i-prkr

  I learned a lot since doing this project and I definitely would do things differently. While your method would fix it, I'm already using grid which is more flexible for layouts like this. Initially I wrote this:

    @include a.breakpoint(medium) {
      grid-auto-rows: 1fr;
      grid-template-areas:
              'a a b'
              'c d d'
              'e e e';
    }
  

  Where grid-auto-rows: 1fr; would make each grid row even making the last container bigger than it needs to.

  What I should have done is grid-auto-rows: max-content; so that each row height would be the height of the largest container. Since the last container takes up the last row, there won't be that extra space anymore.

  While I like how things where done in the article, I prefer my method due to the fact I wrote it with reusability and simplicity in mind. While I do like how it uses mixin and functions, I do find it overly complex for a simple task.

  1

  

  P

  Ian Parker•200

  @i-prkrPosted 3 months ago

  @wonderlust101 Great solution! Thanks for the reply including your thoughts - I think I'd have to agree with you for the alternative method given in the article, but hopefully it comes in handy in the future :)

  Happy coding!

  0