Single Price Grid Component with HTML and CSS.

Community feedback

• 

  Amindu Liyanaratne•160

  @AminduSasanka

  Posted about 3 years ago

  Good job and nicely done. I have proposed some changes to your code to center the whole component. check it out.

  00

  Marked as helpful
• 

  Ahmed Bayoumi•6,680

  @Bayoumi-dev

  Posted about 3 years ago

  Hey! Here are some suggestions:

  • Heading levels should only increase by one, Make sure you are using the headings in order... Ordered headings make it easier to navigate and understand when using assistive technologies.

  • You have used flexbox to center the component on the page, but you need to add justify-content: center; to the body:

  body{
      background: var(--light-Gray);
      font-family: 'Karla', sans-serif;
      font-size: 16px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;    /* <--- Add */
  }
  .container{
      max-width: 960px;
      /* margin: 0 auto;          /* <---- Remove */
      /* margin: 2rem 1rem;          /* <---- Remove */
      padding: 2rem;    /* <--- Add */
  }
  

  I hope this is useful to you... Keep coding👍

  00

  Marked as helpful
• 

  Vani•160

  @VANIMEHTA

  Posted about 3 years ago

  Try to position this container in center it would look neater. You can do this by giving equal margins from top and left in % to your container. Also I guess you forgot to add hover state to the signup button.

  00

  Marked as helpful