Responsive Social Proof Section with Sass and Animate.css

Community feedback

• 

  Connor Z•5,115

  @zuolizhuPosted about 4 years ago

  Hi ApplePieGiraffe,

  Amazing job on this challenge! I like the animation you added 😆, it must be a lot of fun to use the Animation.css library isn't it 😏.

  The code looks very clean and easy to read 😯. I found that you made some reusable utility classes, good practice!

  I noticed that you are using transform to make the shift of the positions of some elements 👀. There is nothing wrong with that at this project. However, I feel it is kind annoying when measuring the distance between two sections if the one of them have the transform 😐.

  In your example, <section class="bottom" ... has 192px height. But the reviews within it already exceeded the height 🧐.

  If there is another section down below this section and have margin-top maybe 10rem, then the actually margin-top you will see is less than 10 rem because of the transform 🤯.

  So instead of transform-y-sm and transform-y-md I would go

  .mt-sm {
    margin-top: 3rem;
  }
  .mt-md {
    margin-top: 6rem;
  }
  

  You might see that the first review figure will be stretched 😬, no problem, add align-items: flex-start; to your .bottom will fix it 😎.

  I would also add a max-width: 1110px; (I think FrontendMentor loves the number 1110, they always use this number for the container size 🤣) to the main, this will make sure your page won't tear apart in the extra wide screen.

  Your project becomes better and better, can't wait to see your next project!

  Happy coding 🙌!

  4

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @zuolizhu

  Thanks so much for your help!

  I'll definitely take all you've said into consideration in this project (and future ones)!

  Happy coding, too!

  0
• Account deleted

  This comment was deleted over 3 years ago

  0

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @maybesmurf

  Thanks for the feedback!

  0
• 

  Guy Ezra•615

  @ezraguyPosted about 4 years ago

  Hey @ApplePieGiraffe, very responsive and very professional! and the animations make it look even better! Great Work!

  0

  ---

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  @ezraguy

  Thanks a lot!

  0