Interactive Order Summary Layout using CSS flexbox

Community feedback

• 

  Adriano•38,330

  @AdrianoEscarabotePosted about 2 years ago

  Hi yookateoh, how are you?

  You did a great job on this challenge, but I have a few tips I think you'll like:

  1- Page should contain a level-one heading, you could have changed p.title to h1 click here

  I noticed that the background image was breaking, to fix this we can do the following:

  body { background-repeat: repeat-x; }

  Doing this the image will repeat only horizontally.

  The rest is great! Hope it helps... 👍

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @dhdbrud318, Congratulations on completing this challenge!

  Here's some tips to improve your solution design:

  1.The SVG background is not properly applied, to fix that first you need to add background-size: no-repeat (to avoid it repeating) and then add background-size: contain to make it fit full width and vertically aligned with the card.

  body {
      background-image: url(images/pattern-background-desktop.svg);
      background-color: hsl(225, 100%, 94%);
      background-repeat: no-repeat;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-size: contain;
  }
  

  2.Your solution is fine but if you note after max-width: 350px the pricing content start to pop out the container, to fix that you can use a media query to make the price content goes to different rows:

  @media (max-width: 350px) {
  .annual-plan {
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0