3-column-preview-card-component

Community feedback

• 

  Mohammed Abbas•390

  @Mohammedabbas7Posted 10 months ago

  Hello

  congrats on completing this challenge 🎉🎉🎉🎉.

  nice solution by the way but I have a few adjustments for you:

  • instead of using the flex-wrap: warp property on the .root element to make the layout for the mobile version to make the site responsive for different screen sizes you can use media queries like this:

  @media(max-width: 768px) {
      .root {
          flex-direction: column;
      }
  }
  

  • also I noticed that you did not add the hover effect to the button but you did add the focus effect, you can add this code to add hover:

  button:focus,
  button:hover {
      background-color: transparent;
      color: white;
   }
  

  • also you can add the transition properly on the button to make the transition smooth use this property transition: all .3s;.

  I hope you find these adjustments useful.

  Happy Coding :)

  Marked as helpful

  0
• 

  Enis Kerti•590

  @eniskrtPosted 10 months ago

  Hi, good job! But you can get the card in the middle of the page with code below:

  body{
      min-height:100vh;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  Happy coding...

  Enis

  Marked as helpful

  0