Order summary card challenge using HTML and CSS

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Ciao Alana Caporale, congratulations for your new solution!

  I've cheked your solution and I tried to understand how can we make it more responsive, here's my tips for you Alana:

  To make the component more responsive you need to fix some elements, for example, the button needs max-width: 100% instead of width: 100% and so the image need some work around, add these properties to have flexible images:

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

  A Media query to make the pricing section separated by rows:

  @media (max-width: 340px) {
  .plan-details {
      flex-direction: column;
  }
  }
  

  👋 I hope this helps you and happy coding!

  0