Basic CSS with flex box and media query for responsiveness

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello again Atul Kumar, congratulations for your new solution!

  🎨 You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

  1.You need to fix the container size that is a bit off, this challenge uses the standard container size that is max-width: 1110px.

  To make the image have a better fit inside of it, make the component image responsive with display: block and max-width: 100% (this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover.

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

  2.The best to way to have this image and every image responsive and easy to work, its by creating a general property adding display: block and max-width: 100% to make it fits the size of the container the image is inside and also respect the container width while scaling, add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

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

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  2

  ---

  

  Atul kumar•200

  @AtulKumar0001Posted about 2 years ago

  @correlucas Hey, thanks for the suggestion, but I changed the whole style.css because there were some problems, and now the image problem is also fixed ig😅.

  1