Single price grid component using grid

Community feedback

• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi Taksin,

  Congratulations 🎉 for completing this challenge, your CSS Grid component looks great, and it is great that you used flex to center the card. Also, it is great that you used the right semantic for your code.

  1. Even though it is great that you used a media query, I would suggest using 1 for this project to prevent unnecessary use of the media query. As you adjust the screen size from mobile to desktop, you can remove the media query and just keep the same properties used for the .grid. I would suggest adjusting the width properties so that the card does not exceed a certain width e.g.

  .grid {
    max-width: 800px;
    width: 100%;
  }
  
  body {
    margin: 0 10px;
  }
  

  I included the margin property for the body so that the card does not touch the side of the screen.

  Also, I would strongly suggest for future projects that you follow a mobile-first approach as it will be easier for responsiveness and changing/rearranging the elements within your body.

  Overall, great attempt and wish you the best for your future projects so keep coding 👍.

  0