Responsive design of a Order summary card using CSS FlexBox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Tunde-webdev, good job for completing this challenge! 👋

  I am not an expert but here are some suggestions to improve your code:

  You could use the backgrounds properties to fix the background

  body {
      . . .
      background-color: hsl(225deg, 100%, 94%);
      background-image: url(./images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-position: left top;
  }
  

  • background-color Set the background color
  • background-image Set a background-image
  • background-repeat Sets if a background image will be repeated
  • background-position Sets the starting position of a background image.
  • Also you can use the background-size to specifies the size of the background image

  The background property is a shorthand to all the properties mentioned above:

  background: hsl(225deg, 100%, 94%)
      url(./images/pattern-background-desktop.svg)
      no-repeat
      left top;
  

  References: CSS background Property | Background property

  I hope those tips will help you.

  Good Job !

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Tunde-webdev, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  The background wave image is missing and here’s the step-by-step to add it.First of all add the image as a background inside the body this is the code for that: background-image: url(../images/pattern-background-desktop.svg);

  Then you add background-repeat: no-repeat to avoid the background repeating and background-size: contain to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to use background-size: 125%, Here’s the code with the modification and the image applied as background:

  body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      display: flex;
      background-size: contain;
      justify-content: center;
      align-items: center;
      background-color: #E1E9FF;
      background-repeat: no-repeat;
      min-height: 100vh;
      background-image: url(images/pattern-background-desktop.svg);
      line-height: 1.3rem;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0