Single price grid component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have other suggestions about your code that might interest you.

  • Use <ul> and <li> for the content under "Why Us": Since the content is a list of items, it's more semantically correct to use an unordered list (<ul>) and list items (<li>) instead of using paragraph (<p>).

  • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source 📘

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1
• 

  Daniel 🛸•44,270

  @danielmrz-devPosted 11 months ago

  Hello @osmanbay90!

  Your project looks great!

  I noticed that your card is not centered, so here's two ways for you to do it:

  You can apply this to the body (in order to work properly, you can't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  Or you can apply this to the element you wanna center (works well with projects with only one centered element, like this one):

  .element {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  

  • Also, avoid using percentage values for the card's width. This can make it overgrow and sometimes cause bugs. Use max-width instead with a fixed value, so your card will remain responsive, but it'll grow only until a certain point.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1
• 

  michael•190

  @michael23ePosted 11 months ago

  this is really good

  1