Product preview card component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Barney, congratulations for your new solution!

  Your solution is really amazing, the design details are perfect. There's only a small issue with the card and image responsivity:

  See my tips to fix this:

  To make the container responsive replace width: 340px with max-width: 340px; and the container will resize when the screen scales. Do a test to see the difference:

  .card {
      max-width: 340px;
  }
  

  To make your image fully responsive add display: blockand max-width: 100% and object-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      max-width: 100%;
      object-fit: cover;
      display: block;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1