Product preview card component solution

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Debadutta Panda, congratulations for your new solution!

  Here's my tips for this challenge:

  Make the 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 {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  The alignment here is the same thing of the other challenge, you can use flexbox and min-height to make the child element align to the parent height (body)

  .bg-back {
      min-height: 100vh;
      --tw-bg-opacity: 1;
      background-color: rgb(249 245 235 / var(--tw-bg-opacity));
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  👋 I hope this helps you and happy coding!

  0