Responsive and Interactive Article Preview Component using JavaScript

Community feedback

• 

  Jay Khatri•4,250

  @khatri2002Posted about 2 months ago

  Hi @py-code314!

  The developed solution looks great! Below are a few suggestions for improvement:

  ---

  1) Alignment of the share buttons container:

  On clicking the share buttons, the box containing the social icons appears on top of the button. This box should be horizontally centered with respect to the button. Currently, you've assigned left and bottom values to the absolutely positioned box (div with id card__social):

  left: 60%;
  bottom: 115%;
  

  The positioning is based on the footer of the card (card__footer class), which has position: relative. While this might have been done using trial and error, it's not an ideal approach. If the layout of the card changes in the future, these values will need to be adjusted accordingly.

  A more scalable solution is to create a wrapper div with position: relative that contains both the button and the social icons container. This will allow the container to be center-aligned with respect to the button, without the need for hardcoded positioning.

  <div class="wrapper">
      <button>...</button>
      <div class="container"></div>
  </div>
  

  .wrapper {
      position: relative;
  }
  
  .container {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }
  

  This method will ensure that the container is always horizontally centered with respect to the button. It’s a more robust approach.

  I understand that you made the footer of the card relative to align the box with respect to the entire card for mobile resolution, but you can manage this via CSS media queries. At a specific breakpoint, you can change the wrapper's position from relative to static, and make the footer of the card relative. This way, the box will align with the card on mobile, and still center properly on desktop.

  2) Image on desktop:

  On desktop resolution, the "drawers" image is assigned:

  object-fit: cover;
  

  This will ensure that the image keeps its aspect ratio, cropping equally from both sides if necessary. However, based on the design reference, the image should be cropped only from the right side, not the left. To achieve this, use:

  object-position: left;
  

  This will ensure the image is aligned according to the design's intended crop.

  ---

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

  Marked as helpful

  1

  ---

  

  py-code314•430

  @py-code314Posted about 2 months ago

  @khatri2002

  Thank you so much for your help 🙏🏼

  I tried to position the Social media container relative to Share button but couldn't figure it out. Your advice certainly helped me with that 😊

  I was also able to position the 'drawers' image exactly like in the design files in both mobile and desktop views using object-position property

  Cheers!!

  1