Mobile First with Flexbox, Grid and BEM

Community feedback

• 

  Marlon Passos•940

  @MarlonPassos-gitPosted about 3 years ago

  Good job Murilo.

  Some suggestions:

  • I would recommend you break the layout a little earlier, as there are times when elements get very shrunk

  • In the profile pictures I would add the alt of the picture with the person's name

  • I would change the line-height to 1, so it will always be relative to the font size it will not be necessary to change with @media

  • would add background-position: center top, right bottom; so it would be the same as the original version that the images are pasted in the corners and not centered

  Marked as helpful

  1

  ---

  

  murilo•110

  @mlzziPosted about 3 years ago

  @MarlonPassos-git Fala Marlon, vi que tu é do Brasil tbm. Valeu pelas dicas. Já as usei! hahaha

  1
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great and for the responsiveness, I agree with Marlon about the breakpoint, right now it is too late which makes the layout squished before going into mobile. The mobile view however looks great.

  Some suggestions besides Marlon's helpful feedbacks:

  • Avoid using height: 100vh on a large container like the body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Each star could use an extra aria-hidden="true" attribute on it so that it will be hidden totally. Also you could use them as a value on a background property so that you don't need to create extra img tag.
  • The ratings text is not really a heading tag, because it does not add any information on what the section would/contain, a p tag on it would be great.

  Those only, again great work on this one.

  Marked as helpful

  0

  ---

  

  murilo•110

  @mlzziPosted about 3 years ago

  @pikamart Hi Raymart, Great tips. Thanks for the help. I already applied them! hahaha

  1