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 component

@CuencaGIT

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


this is only a desktop version. If I want to make a mobile version of it too, should I make it first before the desktop?

Community feedback

@bahati7

Posted

Hello good job on this:)

just some tips to improve the code :

  • try to separate your html and css codes in two different files to make it readable.
  • wrap your code in the "main" tag instead of using "div class=main" for accessibility issues
  • to perfectly center the card and for responsivness, try to use this code in the body tag: " display: flex; align-items: center; flex-direction:column; justify-content: center;"
  • please use relative units like rem, em, % instead of px;
  • try it until it's perfect

congratulations :)

Marked as helpful

1

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