Order Summary Component (with SCSS)

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Cellmix, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • For fix the top image in the background just put more specific background properties to the body:

  background: url("../img/pattern-background-desktop.svg") no-repeat top center;
  background-size: contain;
  background-color: #e0e8ff;
  

  • you can use article tag instead of a simple div to the container card for improve the Accessibility
  • add descriptive text in the alt attribute of the images
  • remove all margin from card class because with flex they are superfluous
  • use flexbox properties to the body to center the card. Read here -> best flex guide
  • use min-height: 100vh to main tag instead of height, otherwise the content is cut off when the browser height is less than the content
  • add transition on the element with hover effect
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😉

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Cellmix, congratulations for your new solution!

  The value you’ve used for the shadow make it too much dark and strong, to create a smooth shadow you need to give it less opacity and more blur try this value for example and see the difference between the previous shadow and this one box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 5%); If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Shiva•670

  @shivaprakash-sudoPosted about 2 years ago

  Hello Cellmix,

  The card looks fantastic on both mobile and desktop. I just have a few suggestions, if you don't mind.

  • A little bit of top and bottom padding to the button on bigger screens would make it look even better.
  • Try to put the attribution outside of the card and inside a footer.
  • The font sizes can be increased a little bit on bigger screens, so that they don't look small.
  • h1 tag is usually used for page headings and for other sections and components, usually h2-h6 tags are preferred.
  • Semantic tags can be used for the card component, like section, article, etc., for better accessibility.

  I hope my feedback is helpful. Good luck!

  Marked as helpful

  0
• 

  Adriano•38,160

  @AdrianoEscarabotePosted about 2 years ago

  Hello everything is fine?

  I liked the result of your project, the way you positioned the background image was very effective, it was pretty cool it was repeated only to the sides. I have a tip to slightly improve the responsiveness of the project:

  1- Add a side padding to the body padding: 0 20px;, so that when the resolution is lower the content doesn't hit the edge.

  The rest is really good! Hope it helps... 👍

  Marked as helpful

  0