Frontend Mentor | Order summary card

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @maxted83, congratulations for your new solution!

  😎 You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

  1.Its not so good that you used overflow: hidden for the whole content, in this case this property is making the content get cropped when the component gets tiny. Instead of using overflow to make the rounded borders use border-radius for each card.

  2.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.

  @media (max-width: 350px) {
  .pricing {
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Adriano•38,120

  @AdrianoEscarabotePosted about 2 years ago

  Hello @maxted83, how are you?

  I really liked the result of your project, but I have some tips that I think you will like:

  1- Document should have one main landmark, you could have put all the content inside the main tag click here

  I noticed that there were two scrollbars on the page, to fix it I did the following:

  * { margin: 0; padding: 0; box-sizing: border-box; }

  The rest is really good! Hope it helps... 👍

  Marked as helpful

  1