Skip to content
Submitted almost 2 years ago

Order-Summary-Solution

Dustin Soos•60
@dustinsoos
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

So the solution looks a bit different because I learned that frontendmentor.io uses firefox browser to see code, even though using chrome dev tools my solution looks nearly identical. Any tips on making a website multi-browser responsive?

Still newer to all this stuff, let me know! Thanks!

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

    There is no need for a height value in .container , if you still want to give it a height, change the value to auto. Auto is the default value of the height when it is not declared.

    There is no need to give a .plan-section a height value, give .plan-section a padding-top and padding bottom values.

    You forgot to add the hove effect to the design.

    Hope am helpful.

    Well done for completing this challenge. 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