Product preview, just HTML and CSS.

Community feedback

• 

  Yabesh•180

  @YabeshyjPosted almost 2 years ago

  Hi @Scynes Your solution is really good 👍🏻

  Tips to avoid warnings ⚠️ 1)Use at least 1 heading tag 2)Wrap all the content in the <main> tag so you can't get the landmark warnings 3) use alt attributes in img tags

  1
• 

  Sppam•180

  @SppamLitePosted almost 2 years ago

  Hey Scynes👋 Nice job on completing this challenge!

  I do think grid is harder than flex box but you did this challenge with grid, impressive! 👍

  To answer your question:

  Use flex box is easier to achieve the same layout as you did in grid.

  Similar to what you did using grid to .preview-card, you could do display: flex, flex-direction: column; for mobile and flex-direction: row; for desktop. Instead of controlling the height with grid layout, you could adjust the actual .product-image height since you are using the background-image.

  I hope this could help 🙂.

  Happy coding!

  1