Order Summary Component | @luidrawly

Community feedback

• 

  darryncodes•6,370

  @darryncodesPosted about 3 years ago

  Hi Lusifer

  A few changes I made inspecting your design that i think could help:

  • you should use max-width: 420px; on .component
  • remove display: grid; width: 30%; margin: 25px auto; from .component__content
  • change .content__img to: width: 100%; height: auto;
  • you could add a hover affect to your <button>
  • use this on your body to center your design nicely in the viewoport:

    display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
  

  Marked as helpful

  1

  ---

  

  Luisfer Doria•60

  @luis123doriaPosted about 3 years ago

  @darryncodes Hi! Thank you very much for the help! The changes in .component__content and .component were of great help to me, as well as the styles to align the design very well in the center with flexbox in the body Thank you very much really!

  0
• 

  Tiass•295

  @TiasstiassPosted about 3 years ago

  Good job!👏

  Tested it on Safari iOS, nice work on the card itself, the positioning is off on both portrait and landscape orientation. Also the box-shadow on the card is off and its values looks random, 0 2px 5px #00000033 is usually enough for a card

  Keep up the good work 💪

  Marked as helpful

  1

  ---

  

  Luisfer Doria•60

  @luis123doriaPosted about 3 years ago

  @Tiasstiass Hey! Thanks u very much for the help for the box-shadow properties. I have been trying with many values ​​before and they do not convince me, I just had to look for something simple and easy that was the one you recommended

  Thank you so much for everything!

  1