flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Juan, congratulations for your new solution!

  I did some fixes to your code and also a tip about how to make the header image responsive: To make it centerd I removed all width and height from body there you need on flex and min-height: 100vh to make this alignment:

  body {
      background-color: var(--pale-blue);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      /* height: 900px; */
      /* max-width: 1440px; */
      /* min-width: 300px; */
  }
  

  And a good 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 {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Juan•150

  @JuanGarridoTrochePosted about 2 years ago

  @correlucas Falei Galera! Obrigado pela sua solução. It's just what I needed. I made these corrections in my exercise. Muito agradecido!

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  HI @JuanGarridoTroche,

  Your card is wider than the one in the design and because you used background-size: cover the image is zoom in to cover the size of it's wrapping container while still keeping it's aspect ratio. If you for example set the max width of the card to 400px pixel you'll see that the image will look closer to the one in the design.

  But you did good these are things you'll learn and pickup as you practice.

  Marked as helpful

  1
• 

  Juan•150

  @JuanGarridoTrochePosted about 2 years ago

  Thanks for your comments. I'll try not to make that mistake again. I'm still learning thanks to your comments. Thank you very much for your answer!

  1

  ---

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  @JuanGarridoTroche don't worry the more you practice the easier it will get just keep doing what you're doing.

  1