Blog preview card

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 9 months ago

  Hello @Absynthee!

  Your project looks great!

  I have one suggestion for you to improve it even more:

  • Although it works, using position: absolute is not the best option to center an element. It can cause bugs and may result in part of the content being cut off on smaller screens.

  Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

  📌 Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;  /* it works with grid too  */
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1
• 

  Chirag•400

  @chirag-bishnoiPosted 9 months ago

  Hello @Absynthee, you have created the card very nicely but the problem I see is that it stars shrinking way before the screen touches it. This is because you have given your body position absolute. If you want to center the card then give your html and body height of 100%. Then just just flexbox. Remove position absolute as well as transform. Also, instead of giving width:340px to main element use max-width:340px.

  For comparison you can check out my project for this. Hope it helps :)

  Marked as helpful

  1

  ---

  

  Austin•340

  @AbsyntheePosted 9 months ago

  @chirag-bishnoi Thank you for the feedback! Very helpful indeed. :)

  1