Frontend-Mentor-Single-Price-Grid-Component

Community feedback

• 

  STEPHEN Obayuwana•340

  @xaintobasPosted 4 months ago

  Hi @cmadoka2003,

  Nice work on your design! Here are a few opportunities to enhance it:

  Spacing below the "content" div: I noticed there is a lot of space below your "content" div. To fix this, consider updating your grid container styling from:

  .content {
      width: 1030px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
  }
  

  to:

  .content {
      width: 1030px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, auto);
  }
  

  Using auto in grid-template-rows: repeat(2, auto); will help adjust the row height dynamically based on the content.

  Mobile screen adjustments: For better responsiveness on mobile screens, consider removing the height: 100vh; from your body element. This can help avoid unnecessary scroll issues.

  These adjustments should help improve your design. Let me know if you have any questions or need further assistance!

  Hope to be helpful.

  Marked as helpful

  1