Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
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

Frontend Mentor Order Card Summary Solution

GM-CODES 40

@GM-CODES

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


I found it difficult to apply margin-left and margin-right around the container (or padding-right and padding-left within the body) as the width always span device's width (for screen width less than max-width of 768px as defined by media query). This can be seen in the mobile version screenshot attached to my repository URL. What could be the reason? I appreciate your answer and contributions in advance.

Community feedback

_nehal💎 6,710

@NehalSahu8055

Posted

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

  • Don't using margins to center the card ,To properly center the card

  • USING FLEXBOX and

body{  
    display: flex;
    justify-content: center;
   align-items: center;
   min-height: 100vh;
   ...
}
  • Use Semantics for the proper design of your code.
<body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer> 
</body>
  • You should use headings is sequential order h1, h2, h3, h4......

I hope you find this helpful.

Happy coding😄

Marked as helpful

0

GM-CODES 40

@GM-CODES

Posted

@NehalSahu8055 Thanks for your contributions pal

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