Order summary component with Flexbox and Grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @zerescas, congratulations on completing this challenge!

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  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.

  .selected-plan-container {
      display: flex;
      gap: 0em 1.15em;
      grid-template-columns: 3em auto 1fr;
      grid-template-rows: 1fr 1fr;
      background-color: var(--light-pale-blue);
      padding: 1.5em;
      border-radius: 0.8em;
      margin-bottom: 2.1em;
      flex-direction: column;
      align-items: center;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Alexander•120

  @zerescasPosted about 2 years ago

  @correlucas Thanks for the good advice. It's the interesting trick with changing the "display" property on the fly. I did changes in code.

  0
• 

  Aviral•160

  @AkunamoPosted about 2 years ago

  Hey Aleksandr I saw your code and its pretty neat and really clean.

  But at the footer section you used two div, one with class of top-left-decoration and bottom-right-decoration, instead of that you can use pseudo elements :before and :after, these elements are mostly used for decorative purpose and it helps write less html.

  Happy Coding!

  Marked as helpful

  1

  ---

  

  Alexander•120

  @zerescasPosted about 2 years ago

  @Akunamo Thanks for the great tip, I did changes in code.

  0