order-summary-component using flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • You should use the cursor: pointer property to indicate that the element like a button or a link is clickable.

  • Use background-image only for decorative images, those images that do not add anything to the content of the page such as an icon, instead you can use the img tag for any situation but it is considered better to use background-image for decorations, in your case it's fine.

    A tip: you can also use the pseudo selectors ::after and ::before to add images without having to have an empty div.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  To center .order-card on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body.

  To center .container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  There is no need to redeclare this in the media query.
  
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1