Responsive Article preview, using flexbox and JS

Community feedback

• 

  Jay Khatri•4,270

  @khatri2002Posted 2 months ago

  Hi! The developed solution looks really good! Below are my UI suggestions:

  1. Use of Button Instead of Div

     • Currently, you're wrapping the share-icon image in a <div> and handling the click event on the image itself.
     • Since this element performs an action on click, a <button> element would be more appropriate.
     • Why?
       • Accessibility: Buttons are natively focusable and actionable, making them more accessible for users with assistive technologies.
       • Semantics: Buttons inherently signify interactivity, improving the semantic structure of the code.

  2. Creating a Perfect Circle for the Icon

     • Currently, you've assigned a fixed height and width to the image and used a fixed padding to align it within its parent. This results in a stretched circle and is not the recommended approach.

     • To create a perfect circle and center-align the icon:

       /* Styles for the container of the image */
       height: 2rem; /* Adjust as required */
       width: 2rem; /* Equal height and width */
       border-radius: 50%; /* Makes the container a circle */
       display: flex; /* Use Flexbox for alignment */
       align-items: center; /* Vertically align the image */
       justify-content: center; /* Horizontally align the image */
       

     • With these properties, the container will form a perfect circle, and the image inside will be perfectly center-aligned without relying on fixed height, width, or padding for the image itself.

  ---

  Great work so far! Implementing these suggestions will make the UI cleaner, more accessible, and aligned with best practices. Keep it up! 🚀

  Marked as helpful

  0

  ---

  

  Williams Akanni•330

  @shadowbanksPosted 2 months ago

  @khatri2002 Updated as suggested, thank you. :))

  1