Order summary card solution

Community feedback

• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi @nerila1310,

  Congratulations 🎉 for completing this challenge, the summary card component looks great you used the flex property correctly however there are some issues I want to address:

  1. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>
  2. You should also wrap the footer within the footer tag and nest this within the body outside of the main tag e.g. <footer class="attribution"></footer>
  3. I would suggest you use the flex property on the body since you have a footer, and it will align it vertically with the flex-direction property.
  4. Instead of using media queries within this project, I would suggest you to use the max-width property so that the width of the card won't increase after a certain width e.g.

  .container {
    margin: 0 20px;
  }
  
  .center {
    max-width: 400px;
    width: 100%;
  }
  

  I added the margin property to prevent the card from touching the side of the screen.

  Overall, great attempt and wish you the best for your future projects so keep coding 👍.

  Marked as helpful

  1
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hi Neri Laredo , congrats on completing this challenge!

  Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

  1.Add the correct size to avoid the container growing more than it should. In this case the Summary card component size is max-width: 340px.

  2.Use <main> instead of <div> to wrap the card container, its better to use <mai> in this case because you’re indicating that’s the main block of content of this page and also because <div> doesn’t have any meaning, it's just a block element.

  3.To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.

  @media (max-width: 350px) {
  .music-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  0