flexbox - mobile first - bem

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Mateo, congratulations for your new solution!

  Here's some tips for you:

  You need to make the container and also the image responsive by replacing all the width with max-width note that the difference between these two properties is that the first is fixed and the second is variable so with max-width the container is able to contract to fit the screen.

  To make your image fully responsive add display: blockand max-width: 100% and object-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  Your product card is really good done, there's not much to say about it, but if you want to improve it a little bit more, you can manage the product image inserting the tag <picture> 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

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1