Responsive

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Metin, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

  To get your card aligned you need first to remove the margin

  .main {
      width: 300px;
      background-color: white;
      /* margin: 7% auto; */
      display: block;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      overflow: hidden;
  }
  

  Then use flex to align it and min-height: 100vh to give the body the size that the child will align vertically:

  }
  body {
      min-height: 100vh;
      background-color: hsl(212, 45%, 89%);
      display: flex;
      flex-direction: column;
      font-size: 15px;
      font-family: 'Outfit', sans-serif;
      align-items: center;
      justify-content: center;
  }
  

  To make the card and the image responsive you'll need to replace both width you've used in the CSS with max-width.

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Metin Yeğencik•190

  @metinyegencikPosted about 2 years ago

  @correlucas thanks for your answer. I check

  0