@i-prkr
Posted
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!
@wonderlust101
Posted
@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.
@i-prkr
Posted
@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!
