Article Preview Component

Community feedback

• 

  Abdul Khaliq 🚀•72,360

  @0xabdulkhaliq

  Posted almost 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

  ---

  • You already using Flexbox for layout, but you didn't utilized it's full potential. Just add the following rules to properly center the component.

  ---

  body {
  min-height: 100vh;
  }
  

  • Now remove these styles, after removing you can able to see the changes

  @media (min-width: 47rem)
  body {
  margin-top: 8rem;
  }
  
  .preview-card {
  margin: 5rem 1.5rem 5rem 1.5rem;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  00
• 

  _nehal💎•6,710

  @NehalSahu8055

  Posted almost 2 years ago

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  Few suggestions regarding design.

  • Add min-height:100vh in the body to properly center your card
  • To proper align the image as per fem design. Add:

  .article__img {
  object-fit: cover;
  object-position: left;
  }
  
  

  • Use some meaningful and descriptive alt for non decorative image like Drawer with some decorative items above it.

  I hope you find this helpful.

  Happy coding😄

  00