Order Summary Card using HTML and CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @edbizichjr, congratulations on your new solution!

  I've just opened your live site and I can say that you did a great job putting everything together! There are some tips to improve your solution:

  1.Use relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but to all sizes as well.

  2.Its not so good that you used overflow: hidden for the whole content, in this case this property is making the content get cropped when the component gets tiny. Instead of using overflow to make the rounded borders use border-radius for each card.

  3.To make your solution even better and more responsive, you can create a media query to break the elements in the pricing section after width: 350px and make every content in a different row, saving space for low resolution devices.

  @media (max-width: 350px) {
  .chosenPlan {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.75em;
      padding: 1em;
      background-color: hsl(225, 100%, 98%);
      border-radius: 8px;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  edbizichjr•100

  @edbizichjrPosted about 2 years ago

  @correlucas Thanks so much for your feedback and explaining why! It helps on this learning journey.

  0
• 

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  Hello, edbizichjr Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • You might want to use semantic tags like the <main> to wrap your code, instead of div. like

  <main class="container">
        <div class="card-grid"></div>
  </main>
  

  You could also make use of <section> and/or <article> semantic tags. This would help improve accessibility.

  I hope it will work. Happy coding.

  0