Blog Preview Card

Community feedback

• 

  SecretariatV•150

  @SecretariatVPosted 4 months ago

  Hi, @lalaholmesss. Hope doing well.

  Your workig very good.

  But have got some implement.

  In your project you using margin:auto; top: 50%; for move center your card. Of cource it's correct. But it isn't best solution.

  The best solution is using flex or grid on parent tag.

  Like this.

  This is your code.

  .container { width: 400px; margin: auto; border: 1px solid black; background-color: hsl(0, 0%, 100%); position: relative; top: 50%; transform: translateY(25%); border-radius: 20px; box-shadow: 8px 8px black; }

  And solution.

  <main> <div class="container"> </div> </main>

  main { width: 100%; min-height: 100vh; or height: 100vh; // One way display: flex; align-items: center; justify-content: center;

  //Other way
  display: grid;
  place-items: center;
  

  }

  I wish you success.

  Thanks.

  0