Product Preview Card using flexbox and a bit of media query

Community feedback

• 

  Luqman (Luke)•320

  @luqmanx1998

  Posted 11 months ago

  Hello ! That's really good imo ! You mentioned having some issues with the size of the card, I assume you meant the proportions of each side of your card, that the card-details side is bigger than your image side? If that's the case, I looked into your code, and I think for your desktop responsive media query, you could try this maybe:

  .card { display: grid; grid-template-columns: 1fr 1fr; }

  And perhaps you may want to remove the gap in your .card class too, if you choose to try this , so it looks uniform ! Grid flows in rows by default, so no need for flex-direction: row with this method either ! Have a great day :D.

  13