Made with react

Community feedback

• 

  Rimsha•240

  @rimshub

  Posted almost 2 years ago

  Hi, congratulations on getting the challenge done!

  Great solution, everything is working smoothly and nicely. However, I have noticed the flag images of the country are not responsive to screen sizes. The image completely disappears on mobile screens. So I looked into the file CountryCard.scss

  img {
          width: 100%;
          height: 200px;
          object-fit: cover;
      }
  
  

  I think the following are the issues with these rules:

  1. The image has a fixed height of 200 pixels, which leads to cropping or distortion if the original image's aspect ratio is different.
  2. The object-fit: cover; rule will make the image cover the entire container while maintaining its aspect ratio, potentially cropping parts of the image to fit the specified height of 200 pixels.

  The following approach allows the image to automatically adjust its size based on the width of its parent container. Here's how you can do it:

  img {
    max-width: 100%;
    height: auto;
  }
  

  • max-width: 100%; This rule ensures that the image will never exceed the width of its parent container. It scales down the image proportionally to fit within the container's width.

  • height: auto; Setting height to auto maintains the image's aspect ratio, which means it will adjust its height proportionally to the width changes imposed by max-width: 100%;

  You can learn more here How to make images responsive - CSS

  Hope my answers did help you! Happy learning😄

  10

  Marked as helpful