Social Proof Section Using CSS Grid

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello DarkDev, congrats on finishing the challenge! great job with the layout

  I will try to give some feedback in your grid!

  On your sections-reviews-container, you are using Grid but you are not getting the full juice out of it, cause you are positioning the child elements using position: relative and position: absolute!, instead of that you should increase the size of your sections-reviews-container maybe height: 20rem is a decent value, you will notice that now your grid elements scale with the grid. Now you should align each one of them on the respective position using align-self, to have this working you should first remove your positions.

  1. Lets recap, remove all the position states from your sections-reviews-container.
  2. Get the width of the sections-reviews-container to 20rem.
  3. Use align-self: flex-start on review-card-1, align-self: center on review-card-2 and align-self: flex-end on review-card-3

  Same result, no strange position needed, less lines of code, and all made with grid!

  Hope my feedback helps you, if you have any questions, don't hesitate to ask!

  Marked as helpful

  1

  ---

  

  DarkDev56•330

  @dotfivesixPosted about 2 years ago

  @DavidMorgade Thanks for appreciating my work. This suggestion really helped me a lot, the results are even better now and I like this approach. I even replaced relative positioning with CSS alignment in rating-cards section using justify-self inspired from this. So thanks a lot !

  1