Order Summary Component using Flexbox & Sass

Community feedback

• 

  Vanza Setia•27,795

  @vanzasetiaPosted almost 3 years ago

  Hi, Yash! 👋

  Good effort on this challenge! 👍 It's great that you leave all the alt empty for all decorative images! 👏

  About the image element, it's actually the problem of the img tag, not the SVG. img element by default is display: inline; so, to make it easier I like to change the display of it to block or inline-block depending on the situation. Also, add max-width: 100% so that it's always fill the entire container.

  There are two things that can be done better.

  • In your CSS, I noticed this selector .cardContainer .cardContent .pricingCard .contentPricing which would be much be as contentPricing . It's a good practice to keep the CSS specificity as low and flat as possible. High specificity will make your stylesheet hard to maintain.
  • There's no need to have an aria-label if the button or the link has already text content in it. Also, I would prefer using actual text content because it is translateable by Google Translate.

  That's it! Hope you find this useful! 😁

  Marked as helpful

  1
• 

  Alazar Getachew•260

  @AlazarG19Posted almost 3 years ago

  nice solution just increase the your main container and thats it

  1