Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order-Summary-Solution

@dustinsoos

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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,670

@Hassiai

Posted

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
Discord logo

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