Order Summary Component with Flexbox

Community feedback

• 

  Shawn Lee•560

  @OGShawnLeePosted over 2 years ago

  Hey mate. How is it going?

  I checked your project and I have some feedback for you.

  • I suggest wrapping all of your content inside of a main tag.
  • Every page should have an h1. And I would have used a span instead of the h5. By the way headings should go down in order. If you have and h1 then the next one in your page should be and h2 then h3 and so on and so forth. Doesn't apply if your are going up, though.
  • Always have and alt attribute in your images, you can leave them empty if the image is a decoration.
  • I would use this to align your card properly and correct the background pattern and color.

  body {
    background-image: url("../images/pattern-background-desktop.svg");
    background-repeat: no-repeat;
    background-color:  hsl(225, 100%, 94%);
    background-size: 100%; /* the pattern stretches the whole view width*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.5rem; /* separation between the card and attribution */
    min-height: 100vh;
  }
  

  I hope this helps, mate. Have a great day!

  Marked as helpful

  1

  ---

  

  Mohamed Ehab•350

  @Programming-School-Pro-CodingPosted over 2 years ago

  @OGShawnLee Thank you for this suggestions

  it is great

  0