Order-summary-component-main

Community feedback

• 

  Kirsten ✨•460

  @ofthewildfire

  Posted about 2 years ago

  Hey! First off, fantastic job, it looks amazing, I just have some small changes I think might be helpful.

  1 - Your music icon image is stretched, its in a flex-container so we can solve that by adding a align-items: center to align the items vertically. This distributes the whitespace and makes it nice and centered

  .plan-container {
      width: 100%;
      height: 20%;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 2vh 3vw;
  }
  

  2: Within your price-plan container you used a span and a paragraph and that is fine, totally, however, a paragraph has default margin and that default margin is causing a lot of space above it and making it look way too wide from the span. This can easily be fixed by removing the top/bottom margin on the paragraph element.

  .price-container > p {
      color: hsl(224, 23%, 55%);
      margin: 0;
  }
  

  -- and alternatively, you could also have used a ul/li to create this and it would have taken care of itself, seeing as <li> ... </li> are in-line and the flex-container would have nicely spaced all components out, but that is just personal opinion really. You did aweome whichever method you prefer. --

  3: Your button and anchor tag hover states are missing the cursor: pointer to give it that micky-mouse hand on hover like your "Cancel order" element has. So adding cursor: pointer would just be it

  You did a really great job and I hope these are helpful additions. :)

  Happy Coding ~ Kaycee.

  00

  Marked as helpful