Order summary component - HTML & CSS Flexbox

Community feedback

• 

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hi Pop,

  Great solution, you should be proud!

  At a glance a few thoughts from me:

  • it's not best practice to style using id's here is a few reasons why
  • your id="container" could be on the <main> tag instead of the additional <div>
  • a few tweaks to your design to help with that background image and centering things nicely in the viewport (you'll need to fix a few other parts of your design if you implement the following:

  #container {
      background-image: url(images/pattern-background-desktop.svg);
      background-repeat: no-repeat;
      background-size: 100% auto; // ADD 100%
      background-color: hsl(225, 100%, 94%);
      display: flex;
      margin: auto;
      /* width: 1440px; */ //REMOVE
      /* height: 900px; */ //REMOVE
      justify-content: center;
      align-items: center;
      flex-direction: column;
      min-height: 100vh; // ADD
  }
  

  Marked as helpful

  1

  ---

  

  Pop Andrei•120

  @pccipriPosted about 3 years ago

  @darryncodes thanks a lot for taking your time to look over my solution and thanks for the advice I will look into it, just got one question why the min-height = 100vh on the container? Isn't that supposed to be less so that the footer has some space as well and not force the viewer to scroll down to view it?

  0