Order-summary-component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Shafaiz Khan, congratulations for your solution!

  I'm with your live and everything seems pretty great. You've done a good work replicating the challenge design.

  There's only 3 minor details you can consider to fix:

  1.Apply the background for the mobile version using a media query and import the correct image:

  @media screen and (max-width: 375px) body {background: url(./pattern-background-mobile.svg) no-repeat top center;}

  2.Pricing section: Note that your pricing section is behaving bad when your solution reach mobile screen and stretch, over the width 280px the information start to pop up out of the container. To fix that you can change the flex-direction and apply a media query around 300px to fix that:

  @media screen and (max-width: 300px) { .pricing { display: flex; flex-direction: column; text-align: center; }}

  Don't forget also to reset the margins for the "change"element to keep it aligned center.

  @media screen and (max-width: 300px) { .change {margin-left: 0; }

  I hope it helps you! Happy coding!

  Marked as helpful

  0