Skip to content
Submitted over 3 years ago

Order Summary Component Challenge

Raitis•190
@RaitisVilums
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I just started and it's my first try of making something. I will be happy to receive feedback on my solution.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Aakash Verma•9,500
    @skyv26

    Hi! Raitis,

    To solve accessibility issues:

    1. wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here

    2. Don't let alt attribute empty, always add some meaning text in it, so that user able to understand.

    3. In order to center your background image use background-size: contain;

    in your below code

    body {
    background-image: url("./images/pattern-background-desktop.svg");
    background-color: hsl(225, 100%, 94%);
    background-repeat: no-repeat;
    background-size: contain; /* HERE I ADDED JUST UPDATE IT IN YOUR MAIN CODE*/
    font-size: 16px;
    font-family: 'Red Hat Display', sans-serif;
}
    1. Change your code
    <div class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
        Coded by <a href="https://www.frontendmentor.io/profile/RaitisVilums" target="_blank">Raitis Vilums</a>.
    </div>

    TO

    <footer class="attribution">
        Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
        Coded by <a href="https://www.frontendmentor.io/profile/RaitisVilums" target="_blank">Raitis Vilums</a>.
    </footer>

    There are so many changes are required, as If I enter all then this comment will become so longer. So do what @Madmanden said above. and Rest things I wrote.

    I hope you understand.

    Good Luck ;)

    Marked as helpful
  • Christian Holm•500
    @Madmanden

    Hi Raitis! Good effort 😊 On my phone it isn’t centered though. And the box-shadow is too dark.

    Marked as helpful
  • Sam Guliker•540
    @Sam-Guliker

    Hi Raitis,

    For your first time you did a great job. There are a couple of things you can pay attention towards to.

    • Check your headings: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
    • For images use an alt type: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
    • Try to use landmarks like: Header, Main, and Footer. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role
    • You can remove the border-radius top on the mid section.

    I hope this was helpfull,

    Happy coding

    Marked as helpful
  • Raitis•190
    @RaitisVilums

    So when I uploaded the solution, it all went wrong, how can I fix this?

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