Product preview card component.

Community feedback

• 

  Dongmo Shu•280

  @dongmo-shuPosted 11 months ago

  Well done on the challenge. I reviewed your code, and here are some suggestions.

  For the hover effect on the cart button, the colour should change to a different shade of green, not blue. Try this instead.

  .btn:hover {
    cursor: pointer;
    background-image: linear-gradient(rgb(0 0 0/50%)0 0);
  }
  

  You used 2 different product images, as intended. For the PC version, the image fits the div size it was given, but it is now stretched out. Here is what I did to solve this issue.

  .card-container {
    width: 500px;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--white);
    display: flex;
  }
  
  .product-picture {
    background-image: url(images/image-product-desktop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
  }
  
  .product-description {
    padding: 3rem;
    width: 100%;
  }
  

  I also increased the div size of the product description.

  For other issues with the product description, you only need to modify your codes to fit the font-weight and font-size, and you should be good to go.

  I hope this is helpful. if you have any question, feel free to ask.

  Marked as helpful

  0

  ---

  

  Regina•240

  @RgBunnPosted 11 months ago

  @Singraft Thank you so much for provided suggestions, I appreciate it! I was wondering about the colour on the button myself 😄 It was a bit challenging to position the picture for the desktop and i think thats the part which took most of my time. I've tried to apply the changes you've suggested, and it looks great! thanks a lot! 👍🏻

  1

  

  Dongmo Shu•280

  @dongmo-shuPosted 11 months ago

  @RgBunn I am glad that was helpful.

  0