Responsive Order summary component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Mathan Kumar, congratulations for your new solution!

  Your solution is not working full width because you've set the width as 1440px. You don't need to set this size in the body and even in the container. In the container you should use the card size that's around 340px.

  The size 1440px and 375px are only resolution to show you in which the design were created, if you set this values you'll make your solution unable to work in different screens. In this case is better you don't set the width or set as max-width: 100% to make it responsive and working in any screen.

  Remove that and you'll see the background growing full width.

  .container {
      background-image: url(./images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-size: 100%;
      background-color: var(--Paleblue);
      /* max-width: 1440px; */
      margin: 0 auto;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Mathan Kumar•40

  @gmathankumarPosted about 2 years ago

  @correlucas Thanks again mate for constantly highlighting me with the best practices. I will apply the suggested changes and see how it behaves.

  0
• 

  Haris Akbar•100

  @Har1s-AkbarPosted about 2 years ago

  Well done you did a great job but there are some issues I see in the design.

  1. In mobile version I suppose you are using height screen which is not a best practice, it should be height full. 2)In desktop version you should use width full in that way your design will span across whole screen.

  Marked as helpful

  0

  ---

  

  Mathan Kumar•40

  @gmathankumarPosted about 2 years ago

  @Har1s-Akbar thanks Haris - Appreciate your comments and I try use the above suggestions in future challenges.

  0