Skip to content
Submitted over 2 years ago

Responsive Order Summary Component

Paulo Henriques•160
@sqirum
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

Hey guys, In my opinion the project was easy however I'm not sure if I'm following the best practises ou the best solution when placing the card in the middle of the screen using position absolute and transform translate properties.

Thank you in advance guys

Community feedback

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

    👾Bom dia Paulo , congratulations for your new solution!

    I saw your solution live site and I've some considerations:

    In this case is better that you use flexbox to manage the content and give the alignment, the first thing you should do is define the container max-width: 340px to avoid the content poping out the card (like the paragraph)

    You can add the background as a image in the body with background-image to have more control over it and its much better than using `<img>

    I build my solution with flexbox and you can use it as a reference to see the same structure and the CSS: https://www.frontendmentor.io/solutions/order-summary-component-vanilla-css-custom-wave-background-hover-tEKUwaT2id

    👋 I hope this helps you and happy coding!

    Marked as helpful
    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