Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

[Junior Dev] Grid Layout | 7-1 SCSS + BEM

Hailo 90

@HailoMYM

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is my second challenge and I tried to improve the quality of my code using scss and the 7-1 architecture. I also applied BEM naming convention in order to have a better structure for my classes.

I am still looking the way to have pixel perfect design like many others, even I have access to the sketch file I could not figure it out how to have the right margins/paddings.

Community feedback

Guy Ezra 615

@ezraguy

Posted

Hello HailoMYM, the design looks great! awesome job! but I do have 2 suggestions:

  1. At 959px width the stars start to break so i would add a min-width like this:
@media only screen and (min-width: 769px)
.rating__star {
    margin-bottom: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 120px;
    flex: 1 0 120px;
    min-width: 135px;
}
  1. I loved the way you organized the cards without margins only with align-self but around 880px width their height starts to change because the amount of text in each card is different and they look uneven. if you will remove the align-self for the first and last card at the (min-width: 769px) media query and add a height of 90% to all they will look even.
1

Hailo 90

@HailoMYM

Posted

@ezraguy Thanks for your comments, I improved my design a little and now the screenshot looks better. I changed the media breakpoint to avoid the #2 suggestion you made, it may be not the best solution as it is not a solution, just avoiding the problem, but it looks better now.

Thanks again for looking my submission

0

Please log in to post a comment

Log in with GitHub
Discord logo

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