Order Sumary Component

Community feedback

• 

  John Phillips•220

  @johnphillipsdevPosted over 1 year ago

  Hello Augousto Faggion,

  Congratulations on completing your project! I noticed that your buttons have the default styling provided by the browser. You might want to check out some style reset guides online to remove any unexpected defaults. This can be particularly useful when starting new projects. Here are some resources to get you started:

  • CSS Reset
  • Normalize.css

  I also noticed that you could complete your project without using many media queries. You can simply add a max-width property to your card element to prevent it from expanding too far. Here's a link to the documentation for max-width:

  • MDN Web Docs: max-width

  Additionally, you can center your card by giving the wrapping container, in this case the body, a class of display: grid and place-items: center. This should center your card nicely for your next preview screenshot. Just remember to set a minimum height of your body to 100vh to ensure that the container fills the entire screen. Here's some documentation on these CSS properties:

  • MDN Web Docs: display
  • MDN Web Docs: place-items

  I hope you find these resources helpful! Let me know if you have any questions. - Happy Coding!

  1

  ---

  

  Augusto Faggion•100

  @augustofaggionPosted over 1 year ago

  @devmanjohn

  thank you, i will read this resource and also apply in practice, i apreciate your help

  1
• 

  Steve•1,170

  @peanutbutterjllyPosted over 1 year ago

  hey 👋,

  I noticed on big monitors that the card goes wider than the image is and its because you set the width of the .container div to be 37%.

  if you set that to a fixed pixel value (like 378px) then the card stretch to be wider than the image.

  Good job completing the solution!

  1

  ---

  

  Augusto Faggion•100

  @augustofaggionPosted over 1 year ago

  @peanutbutterjlly Thank you , it is very helpful your advice i will corrected and update on github.

  0