Social proof section mobile first with HTML & CSS

Community feedback

• 

  Thiago Souza•80

  @thiagorasouzaPosted over 3 years ago

  Hi Antonius!

  Great solution! 🥳

  I loved how simple your layout is. You managed to make it all work with few Flexbox uses. Nice use of min-* max-*, it is all flowing like it should. I will definitely take an approach similar to yours in my next challenge.

  I also noticed you used background-repeat: space, which I did not know it existed until reading your solution.

  That being said, there is only one thing I could add:

  • You can remove position: relative and bottom: XXXrem on .left-card and .middle-card if you take advantage of flexbox's align-item property in conjunction to margin-bottom. Only margin-bottom won't do the trick, because when you create your flex container on .cards-section using display: flex, CSS defaults the value of justify-content to "flex-start" (items align to start of the main axis - left of the container) and align-items to "stretch" (items stretch in the cross - vertical - direction). So, you need to set .cards-section's align-items property to "flex-end" and them add, for example, margin-bottom: 1em to .middle-card and margin-bottom: 2em to .left-card.

  If my feedback helped you in any way, please consider upvoting it!

  Also, it would be great to receive your feedback on my solution too 😄

  1

  ---

  

  Antonius Steven•100

  @ASteven21Posted over 3 years ago

  Hi @thiagorasouza!

  Thanks for the feedback! it's really helpful!

  I didn't realise that you can actually do that. 😅

  I'll apply that on the next challenge that I will be doing then.

  Regarding doing feedbacks on your solution, sure! I'll be happy to! 😄

  0