Product preview card using Html and CSS

Community feedback

• Account deleted

  use grid or flexbox to center it, don't use margin

  good luck

  Marked as helpful

  1
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year 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

  ---

  • To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

  ---

  • For this demonstration we use css Grid to center the component.

  body {
      min-height: 100vh;
      display: grid;
      place-items: center;
  }
  

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

  .card {
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 24%;
    margin-bottom: 24%;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

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

  Happy coding!

  Marked as helpful

  0
• 

  Mostafa Hashem•200

  @Mostafa-0Posted over 1 year ago

  Good job on completing the challenge, as mousa said you can use flex or grid for centering but make sure you're using that on the container and not the card itself. Since you want to center the card , it has to be in a container that takes 100% width of the page so for example try using the main as the container and don't forget to give it a height as well so it can be centered vertically. One more thing, it's better to remove the width from the body as it may cause overflow and doesn't help with responsiveness. Goodluck!

  Marked as helpful

  0

  ---

  

  Ornelle•70

  @BlackysynchPosted over 1 year ago

  Thanks I will try it in my next solution

  0