Responsive Article Preview Component

Community feedback

• 

  Jay Khatri•4,250

  @khatri2002Posted about 2 months ago

  Hi @mittens67!

  The developed solution looks great! I have a suggestion worth considering:

  To create the circular shape for the share-icon button, you've used padding:

  .card-main__profile-right {
    padding: .5rem .9rem;
  }
  

  However, this results in an oval shape rather than a perfect circle. Using padding is not the best approach to achieve a circle. Instead, a more standard method is to assign a fixed width and height and set a large border-radius:

  .card-main__profile-right {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    
    // To center align the icon inside
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  This will create a perfect circle. You can now remove the padding to maintain the correct shape.

  Additionally, you've wrapped the share icon inside a div element and attached the click event to it. Since the element is clickable and triggers an action, a button element would be more appropriate. This is because the button element semantically indicates an interactive element that performs an action, improving accessibility and usability.

  The rest of the solution looks great! Keep up the excellent work! 🚀

  Marked as helpful

  0
• 

  Abenezer Haile•210

  @proAbenezerPosted about 2 months ago

  Your design is quit small

  0