Price Grid component using css grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @uzairK134, Congratulations on completing this challenge!

  You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

  1.Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in level of importance, never jump a level.

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

  3.Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.

  To save your time you can code you whole page using px and then in the end use a VsCode plugin called px to rem heres the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Uzair, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • remove margin and width from body
  • add width: 45rem to .container class
  • use main tag to wrap the content of page and improve the Accessibility not as container of card
  • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😉

  Marked as helpful

  1