QR Code

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Damian, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

  👏 Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

  1.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

  img {
      /* padding: 10px; */
      max-width: 100%;
      /* width: 275px; */
      /* margin-top: 20px; */
      border-radius: 15px;
      display: block;
  }
  

  Here's your code fixed:

  .card {
      padding: 16px;
      display: flex;
      font-size: 15px;
      max-width: 320px;
      background-color: hsl(0, 0%, 100%);
      text-align: center;
      /* padding-bottom: 20px; */
      border-radius: 15px;
      font-family: Outfit, sans-serif;
      box-shadow: 0px 10px 20px -20px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  

  2.Your component is perfect, but its not responsive yet. To fix this behavior all you need to do is replace the width with max-width. Note that the difference between these two properties is that width is fixed, example, width: 320px is an container that doesn't get bigger or smaller than 320px but max-width: 320px have the maximum of 320px and can contract when the screen scales down and adjust its size.

  ✌️ I hope this helps you and happy coding!

  0