Product Preview card using CSS Grid

Community feedback

• 

  Ahmed Mohamed 🇵🇸•310

  @ahmedafsaPosted 12 months ago

  Hey Susmitha,

  I've reviewed your code, and it's impressive! Here are some suggestions to further enhance it:

  • The design currently exhibits excessive white spaces due to the using of .details { justify-content: space-between;} It might be beneficial to remove this and opt for {gap:} instead.
  • Consider increasing the font size of the current and old prices to better catch the user's eye.
  • For the button:

  1. use margin instead of padding to manage the space between the text and the cart Icon.
  2. It's preferable to encompass the entire button with display: flex to align the text and image precisely in the center, using gap to control the space between the cart icon and the text and using padding to control the button's height and width

  .order-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 64px;}
  

  • I observed that you centered the card vertically using padding: 30px which might not maintain the card at the center consistently especially when the screen area changes Here's a simple trick to ensure the element stays centered:

  .container /* or body */ {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  

  • The code appears to lack responsiveness on mobile phones. To rectify this, you can enhance it by employing the <picture> and <source> elements instead of <img> to display the product image. and use the following media query to ensure responsiveness on smaller screens:

  <picture>
    <source
      srcset="images/image-product-mobile.jpg"
      media="(max-width: 600px)"
    />
    <source
      srcset="images/image-product-desktop.jpg"
      media="(min-width: 601px)"
    />
    <img src="images/image-product-desktop.jpg"/>
  </picture>
  

  @media (max-width: 600px) {
    .your-grid-container {
      grid-template-columns: 1fr;
    }
  }
  

  Apart from those minor points, your code is excellent! Best of luck for you.

  Marked as helpful

  0