Product card preview using CSS grid

Community feedback

• 

  Jeff•210

  @W4GFOPosted almost 2 years ago

  Hello @tony1c,

  First your desktop version looks great! Well done.

  The mobile form-factor would need a couple of different things:

  1. To be laid-out differently
  2. Would also include a different image asset.

  For the first point, this is where @media break-points help. You're using grid - which is perfect, and you might just want to have a single column instead of a 2 column grid for the mobile.

  Also, for the separate image assets, you can do this is either CSS or HTML - I prefer the HTML <picture> element for performance reasons.

  Here's a link to help to better understand the <picture> tag:

  https://www.w3schools.com/tags/tag_picture.asp

  Hope this helps.

  Marked as helpful

  1

  ---

  

  tony/c.dev•240

  @tony1cPosted almost 2 years ago

  @W4GFO I added media queries to display a single grid column for mobile. Seems kinda right but not really sure. Gonna look into the picture tag now. Thank u so much for ur feedback!

  0