Social proof section

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello man, congrats on finishing the challenge, pretty good job with the layout, as Adriano points out, it brokes on high resolutions.

  If you don't mind I would like to give you some feedback.

  • I wouldn't recommend you using position: absolute and position: relative to get items positioned on the general layout, that can cause some buggy problems when resizing (for example here in higher screens), try using either flex-box or grid, in this case I think grid can do the job quite easily, you can try something like this:

  1. First of all remove all the positions statement from the review-section <section>.
  2. Now lets use grid con the section to get some columns, separate them and give it some height so we can get the challenge effect like this:

  .review-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3rem;
    height: 29rem;
  }
  

  3. Now you just have to give the position vertically to each element of your grid, asign a class and use align-self: flex-start for the first element, align-self: center and align-self: flex-end on the last element.

  With this you will have an awesome grid layout, and it will more responsive than using position:absolute!

  Hope my feedback helps you, if you have any problem with the code I just used in the comment, tell me and I will try to get it working on a pull request, apart from that you did a great job!

  Marked as helpful

  1

  ---

  

  Thih_Nezzy•180

  @nobody1234455Posted about 2 years ago

  @DavidMorgade Thanks for your comment. It's tremendously helpful (y) (y).

  1
• 

  Adriano•38,290

  @AdrianoEscarabotePosted about 2 years ago

  Hi @nobody1234455 how are you?

  I really liked the result of your project, but I have some tips that I think you will like:

  1- id attribute value must be unique click here to read about it

  I noticed that the layout was breaking from 1440px, to fix this I did the following:

  body { max-width: 1440px; margin: 0 auto; }

  he rest is great! Hope it helps...👍

  Marked as helpful

  1

  ---

  

  Thih_Nezzy•180

  @nobody1234455Posted about 2 years ago

  @AdrianoEscarabote Luv it bro. Thanks for your comment.

  0

  

  Adriano•38,290

  @AdrianoEscarabotePosted about 2 years ago

  @nobody1234455 no problem, keep coding

  0