responsive 3 card component solution using CSS Grid

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

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

  • Instead of adding borders separately to each column, consider applying a border to the entire component. Then, use overflow: hidden to cut off the excess and make the border apply uniformly to the entire component. This can provide a cleaner and more consistent appearance.

    .grid-container {
      border-radius: 5px;
      overflow: hidden;
    }
    
    /* And remove ALL border-radius from the styles */
    .sedans {
        /* border-bottom-left-radius: 5px; */
        /* border-top-left-radius: 5px; */
    }
    

  • The margin on the body is too large, enough to distort the solution on mobile devices. Also, using margin on the body element can result in unnecessary scrolling in some cases. You should use a modern method to center it, such as flexbox or grid, and also employ max-width on the component to prevent it from elongating too much.

    body {
      /* margin: 200px 238px; */
      margin: 0;
      display: flex;
      min-height: 100vh;
      justify-content: center;
      align-items: center;
    }
    
    .grid-container {
      border-radius: 5px;
      overflow: hidden;
      max-width: 900px; /* Add this new line */
    }
    

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

  Happy coding!

  0

  ---

  

  belkysupreme22•160

  @belkysupreme22Posted 11 months ago

  @MelvinAguilar thanks for your feedback, it really made my design look closer to the provided one. i have updated the codes and you can preview the updated site for the outcome

  0