Responsive Product card using Css flex-box

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Jimmy Lee, congratulations for your new solution!

  Your product card is really good done, you've missed only the alignment and theres a better approach for the image switch between mobile and desktop.

  Here's my tips:

  Align the component with flexbox:

  body {
      min-height: 100vh;
      background: hsl(30, 38%, 92%);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  Look that you can also manage the product image inserting the tag <picture> instead of <img> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html If you're not familiar with the picture tag you can look at the documentation to see how to set it:

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

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  jimmylee•150

  @jimmylee2021Posted about 2 years ago

  @correlucas Thanks man I appreciate it.

  0