Order summary component by Rubbersouls

Community feedback

• 

  Sarah•835

  @sarahc-devPosted almost 3 years ago

  Hey! This looks good - so well done! A few tips that might help you on future challenges -

  • Use min-height: 100vh instead of 100% on the body and don't set a height on the html tag.
  • You don't need so many divs! If it only contains one element - you probably don't need it.
  • Avoid setting a height and width on everything - try to use padding and margin to create the spacing instead.
  • For accessibility, avoid using px values for font sizes, heights and widths - use rem or em instead

  Hope that helps. Keep going!

  Marked as helpful

  1
• 

  Candela Bramucci•680

  @bramuccciPosted almost 3 years ago

  Hello rubbersouls, congratulation for your first challenge in this platform 😊 It's amazing to see new people. I'm surprise, your solution is very close to the original design. Here are the things I think can help you:

  • Don't use flex (or grid) in your body. You can see that this give you problems, like the need of using position: absolute in the attribution (which in screen of 1024px overlaps with the card). If you want to center use margin: auto, although I wouldn't put in the body but in the section.
  • No need to use a separate class for the width. Just put it in the .card
  • There's absolutely no need of use so many divs inside the card. Just put the content like .card>img+.card__content. Maybe you want the img inside of a div, that is also ok.
  • I write .card__content because this is helpful for the padding. Add padding to that div and you will not have to adjust every element manually.
  • Instead of a @media you can use in the card: width: 90vw; max-width: 50rem (just an example, change those values).

  I... write a lot. This is only to help, I really think that you did a great job. Keep coding!

  Marked as helpful

  1
• 

  rubbersouls•180

  @rubbersoulsPosted almost 3 years ago

  @sazzledazzle @bramuccci Thank you for all of your very constructive advice. This is my first project and your advice helped me a lot to improve. :)

  1