Skip to content
Submitted over 3 years ago

Order Summary Component

P
Arthur•290
@ArthurPog
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

2 problems so far:

I didn't know how to group the "Music Icon" and "Annual Plan" together while having the whole row justified and vertically centered at the same time.

I used these rules to vertically centre my content in the body: body { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

The problem with this is that when I make my browser screen really short, let's say less than 500px, the top of the content starts to cut off and it won't scroll up.

So I fixed it by creating conditional CSS where I monitor the height of the screen. This is not elegant and I feel deeply ashamed :) Any advice on how to actually stick the content to the top of the screen, when the viewing height becomes too small, with the possibility to scroll, would be much appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Travolgi 🍕•31,280
    @denielden

    Hey Arthur, congratulations on completing the challenge! You did a great job 😉

    Let me give you some little tips for optimizing your code:

    • add main tag and wrap the card for improve the Accessibility
    • for fix the top image in the background just put more specific background properties to the body:
    background: url("../img/pattern-background-desktop.svg") no-repeat top center;
background-size: contain;
background-color: #e0e8ff;
    • remove margin from body to remove the scroollbar of browser
    • use min-height: 100vh and not height
    • add transition on the element with hover effect
    • instead of using px use relative units of measurement like rem -> read here

    Hope this help! Happy coding 😁

    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia

    Hello, Arthur! 👋

    Regarding the problem that you have:

    • The music icon has a line height, maybe because the img element is an inline element. So, I recommend making the img element as a block element and (probably) setting line-height: 0 would solve the problem.
    • I highly recommend making the body element as a flexbox container to center the child element which should be the card element. Then, set min-height: 100vh; (**not height) to make the card vertically center and allow the body element to grow if needed. So, the point is to use min-height and flexbox instead. Also, add some padding as well to prevent the card from having full width on the small screen size.

    Some feedback from me.

    • All images on this site are decorative images. So, I recommend leaving the alt empty.
    • Don't use br elements for presentational purposes. Read what MDN documentation says about it. I would recommend making the span as block element to move the text to another line.
    • Always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly.
    • I would highly suggest using HTML native element instead of role attribute. It's best to use the native HTML element whenever possible.

    That's it! Hope you find this useful!

    Marked as helpful
  • P
    Arthur•290
    @ArthurPog

    Btw, does anyone have any clue why my generated screenshot is offset vertically by approximately 10 pixels? I have this with every project :)

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