Order summary card (vanilla CSS)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello James, congratulations for your new solution!

  Your solution is great and really responsive, I've some tips to improve it even more:

  Use object-fit: cover; to make the header image scale and crop inside the container:

  img {
      object-fit: cover;
      max-width: 100%;
      display: block;
  }
  

  Create a media query to save space in the pricing section by puttin every element in a different row after 320px

  @media (max-width: 320px) {
  .order-card .content .price {
      display: flex;
      flex-direction: column;
  }
  }
  

  👋 I hope this helps you and happy coding!

  1

  ---

  

  James Viphakorn•250

  @viphakornPosted over 2 years ago

  @correlucas thanks

  0