Skip to content
Submitted about 2 years ago

Order Summary Component using Flex Box

JAV•40
@andcare
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone,

This is my Order Summary Component. I don't think that there was something that I find difficult in making the component, but if there's something that you see wrong on how I approach the challenge feel free to comment it out. 😁

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @andcare, Congratulations on completing this challenge!

    Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:

    Add background-size: contain and remove the background-position to make the background display the svg image full width and get centered with the container.

    body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    font-family: var(--primary-font-family);
    font-size: var(--font-size-400);
    background: url(images/pattern-background-desktop.svg);
    background-color: var(--primary-color-200);
    /* background-position: center; */
    background-repeat: no-repeat;
    background-size: contain;
}

    ✌️ I hope this helps you and happy coding!

    1
    JAV•40
    @andcarePosted about 2 years ago

    @correlucas

    Hi!

    Thank you so much for the suggestion. That's why I'm it feels a bit off whenever I look at the background of the project. I'll take note on this for the next challenge. 😁

    0
  • Neil Kanakia•300
    @neilk17Posted about 2 years ago

    Hi Jav,

    Great job with completing this challenge and at making it responsive

    If you don't mind, here's some small improvements you can make:

    Accessibility issues: <html lang="en"> just ensure that all of the content is indented within this tag.

    Responsive Design: I think you have done this part perfectly

    Overall this is great and good luck for your other challenges.

    1

Please log in to post a comment

Log in with GitHub

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