Order summary component

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hey, first of all congrats on working on your own for the first time! :) Your solution looks good, there's just a few things to fix.

  1. Add background-repeat: no-repeat to the body. If you want to make it look like the design, you can add the greybluish color and the url both to the background, simply comma separated.

  2. If you want to center your card, you can easily do it with min-height: 100vh, display: grid and place-items: center, adding these to the body. Of course, you'll need to get rid of the huge margin-left, but this should also make your design a bit more responsive.

  3. A cursor: pointer on the button would be lovely. Adding some hover states would improve it a bit too.

  4. And finally, always check the accessibility report. Paying attention to accessibility is important and this report is a nice way to start with it.

  Good luck! :)

  Marked as helpful

  1

  ---

  

  David Kalany•50

  @AmazingCukrPosted about 3 years ago

  @FluffyKas Hi,

  many thanks for ur feedback! Anyways Im having trouble with min-height: 100vh, it pull my card all the way down. Here is my code if you can help me solve this issue :) .card { margin: 0; margin-top: 20px; display: flex; flex-direction: column; align-items: center; background: #fff; width: 400px; border-radius: 20px; overflow: hidden; min-height: 100vh; place-items: center;

  }`

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  @AmazingCukr Add it to the body, not the card! :)

  0

  

  David Kalany•50

  @AmazingCukrPosted about 3 years ago

  @FluffyKas Yeah, Im dumb and i didnt read it correctly! :D Would you mind adding me to discord or slack or whatever. It would be nice to have fellow html/css enthusiasist to talk to haha. My discrd is AmazingCukr#9199 if you want :)

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  @AmazingCukr Haha, sure I'll add you on discord :)

  0