Product Preview Card Component Challenge using Tailwind CSS

Community feedback

• 

  Abhilashpandey•270

  @freakyjonesPosted over 2 years ago

  Hi, fsuropaty,

  congratulation on completing the challenge.

  There is two way you can handle image responsiveness

  1. use it as a background image as per your code it will be like

  #image-section{
    background-image:URL(image path);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
  }
  

  My solution also uses this method.

  2. The second method will be when we make img take a width of 100% so that it can inherit the parent container responsive property. The code will be something like

  #imagesection{
    width: 10rem;
  }
  #imagesection img{
    width:100%
  }
  

  I hope this helps. Happy coding:)

  Marked as helpful

  1