Summary component solution

Community feedback

• 

  Wellington Damasio•210

  @wellington-damasioPosted over 1 year ago

  Hi there, João! 🙃

  This project is much more complex than it seems. I thought it would take me only 2 hours complete it but it took me 6 hours to do so haha.

  I think you're using a .flex-container to wrap the two parts of the component on the mobile screen sizes and changing it's flex properties to centralize the two parts of the component in desktop views.

  This is causing your component to have unmatched borders in desktop views.

  I recommend you to use that .flex-container class as a component wrapper that becomes a two-column layout on desktop views and using position: absolute to position that card wrapper on the center of the screen in desktop sizes.

  You can center elements by using the following CSS properties:

  .card__wrapper {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
  }
  

  Overall, you did really good with this challenge! The design was matched, hover effects are on point and mobile view is great.

  Congrats, dude. 🥳

  Marked as helpful

  1

  ---

  

  João Pantaleão•70

  @JoPantaPosted over 1 year ago

  @wellington-damasio thank you so much man. I'm gonna try that out!

  0