Order summary component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Yefry, congratulations for your solution!

  You've a nice component, I liked that you applied this scale on hover effect, you gave an extra touch.

  I have some tips for you:

  1.The background is a little bit out, to fix this you need to use the background properties. See the fixes below:

      background-image: url(/images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-color: var(--Pale-blue);
      background-position: top;
      background-size: 100%;
  }
  
  2.Add `flex-wrap` inside the price section to allow the content break and go to the new row. When the window scale the content gets too much close to each other.
  

  Hope it helps, happy coding!

  Marked as helpful

  0
• 

  Fatlind Shehu•2,230

  @fatlindshehuPosted over 2 years ago

  Hi, Nice work with the challenge, although I would recommend centering the component using flexbox and not margins, here's what you can do:

  • display: flex to set the div/component as a flex container.
  • justify-content: center to center the div/component horizontally.
  • align-items: center to center the div/component vertically.
  • Make sure the div/component has a height.
  • If you’re unfamiliar with flexbox, I would suggest checking THIS

  Also, I would recommend avoiding the use of px together with rem, instead, go only with rem

  Keep it coding...

  Marked as helpful

  0