Submitted about 2 years ago

Order Summary Component using Flex Box

JAV• 40

@andcare

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

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,420

@correlucas

Posted 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!

JAV• 40

@andcare

Posted almost 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. 😁

Neil Kanakia• 300

@neilk17

Posted 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.

Please log in to post a comment

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