Product preview card with HTML and CSS

Community feedback

• 

  MikDra1•6,980

  @MikDra1Posted 3 months ago

  Here are some tips from me to make your life easier.

  • Never set fixed height. Instead set a min-height.
  • There is an easy way of making card responsive and here is how you can do this, :

  .card {
  width: 90%;
  margin: 0 auto;
  max-width: 600px;
  

  It will prevent card from growing bigger then 600px but on smaller screens it will be 90% of the viewport.

  Here is also my way of centering the card:

  .container {
  display: grid;
  place-items: center;
  min-height: 100vh;
  }
  

  Hope you found this comment helpful 💗

  Good job and keep going 😁😊😉

  0