Responsive Card using CSS grid

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello again Omar, congratulations for your new solution!

  You can start to fix this solution by adding <main> to replace the div wrapping all the content. And also manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture. This way you've a clean code and remove the div.

  Add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      object-fit: cover;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0