Skip to content
Submitted about 3 years ago

Order Summary Component using Flexbox & Sass

sass/scss
Yash Kadam•280
@yash-278
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everyone, This is my solution for Order Summary Component.

Had a ton of problems in actually fitting the main SVG in container, I did look it up and was able to do somehow, but I think there might be a better way. Will be studying on it more.

Feedback Welcome !

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Vanza Setia•27,715
    @vanzasetia

    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
  • Alazar Getachew•260
    @AlazarG19

    nice solution just increase the your main container and thats it

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord