Responsive preview card using html and css

Community feedback

• 

  P

  Marc Francis•730

  @marcfrancissPosted 3 months ago

  Great solution!

  You may just fix a little spacing error on your 'cart' class so that the hover animation will be on the button itself not on the figure and text. Also, if you're not using the semantic element 'button', you may add 'cursor: pointer' so it will be considered a button.

  .card:hover {
   background-color: #003622;
   cursor: pointer;
  }
  

  Keep up the great coding!

  Marked as helpful

  0

  ---

  

  praistyles•90

  @praistylesPosted 3 months ago

  @marcfranciss Thanks for the feedback, really appreciate. Can you please assist with how you tackle the images (mobile& desktop img on html and also how to style) l really struggled.

  0

  

  P

  Marc Francis•730

  @marcfrancissPosted 3 months ago

  @praistyles You're welcome!

  About images, I always set it to follow its container:

  img-container {
    border-radius: 5px;
    overflow: hidden;  // for the image to follow container's border-radius if it is set
    (other css...)
  
     img {
       width: 100%;      // to follow container's width 
       height: 100%;     // to follow container's height 
       object-fit: cover;  // so the image is taking all the space of container
     }
  }
  

  Then, you can style your container depending on your needs and the image will follow it.

  Hope this helps. Cheers! 🍻

  Marked as helpful

  0