Responsive Order summary Component using flexbox

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Roms, congratulations for your new solution!

  To fix the issue with the responsivity you need to replace the width with max-width. Note that the difference between these two properties is that width is fixed, example, width: 340px is an container that doesn't get bigger or smaller than 340px but max-width: 340px have the maximum of 340px and can contract when the screen scales down and adjust its size.

  Here's the fixes for you image background and the color to make it full height/width using background-size: contain;:

  body {
      background-image: url(./images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      height: 100vh;
      background-color: #e8edf9;
  }
  

  👨‍💻 Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/order-summary-component-vanilla-css-custom-wave-background-hover-tEKUwaT2id

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Haris Akbar•100

  @Har1s-AkbarPosted about 2 years ago

  You have done a great job. There are somethings wrong with the mobile version, I think you are using height to the screen because it is not scrollable on mobile version and also the background is not covering the whole width of screen on desktop version. You should fix these issues. All in all you did a great job, keep coding

  0