Skip to content
Submitted over 1 year ago

order-summary-component using css flex box

balavignesh111•70
@balavignesh111
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

I find very difficult to properly align the description of order summary(which is mentioned in p tag inside the div class="content" ) and i couldn't do it as per the design. Kindly suggest some ideas to improve my coding skills.

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestions regarding design.

    As for now, don't worry too much on this.

    Possible Reasons:

    • Font-size.
    • Size of your card.
    • Padding within card.

    ➨ Replace height with min-height in body to properly center the card.

    body{
min-height: 100vh;
}

    ➨ Use Semantics for the proper design of your code.

    <body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

</body>

    ➨ For an image like .svg are decorative which screen reader will not render it to be important and skip it, so it makes no sense to add alt leave it blank.

    I hope you find this helpful.

    Happy coding😄

    0

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