Skip to content
Submitted over 2 years ago

Oder Summary Component

Axel•250
@AxlMrt
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

It wasn't really difficult but i lost some time on searching what i needed to make it right. I learned a few things i still didn't knew:

  • shadow box
  • position (relative or absolute)
  • opacity (and that i can put a value in the background-color setting so the child doesn't get the effect)

I also used a lesson a FrontEnd user gave me about min/max-width & min/max-heigth. It felt like a good training.

Waiting for comments, thanks for your interest !

Community feedback

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

    👾Hello Axel, congratulations for your new solution!

    You've used min-height: 80vh and for this reason the component is not fully aligned, try instead min-height: 100vh;

    body {
    background-color: hsl(225, 100%, 94%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    👋 I hope this helps you and happy coding!

    Marked as helpful
    1
  • Axel•250
    @AxlMrtPosted over 2 years ago

    Thank you for a second time. I took a look on it (last time, i didn't checked) and , if it's right, it is the web browser viewport so, always 100% ?

    Thank you again

    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