Blog Card with responsive units

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  Hello, @Stroudy!

  Your project is looking fantastic!

  I'd like to suggest a way to make it even better:

  • Using margin isn't always the most effective method for centering an element.

  Here's a highly efficient approach to position an element at the center of the page both vertically and horizontally:

  📌 Apply this CSS to the body (avoid using position or margins in order to work correctly):

  body {
      min-height: 100vh;
      display: flex; 
      justify-content: center;
      align-items: center;
  }
  

  I hope you find this helpful!

  Keep up the excellent work!

  Marked as helpful

  2

  ---

  

  P

  Steven Stroud•11,910

  @StroudyPosted 8 months ago

  Hello, @danielmrz-dev,

  Thank you for your feedback I have now made the following changes,

  Removed margin-inline, margin-top from the container and added to the body.

      min-height: 100vh; 
      display: flex; 
      justify-content: center;
      align-items: center;
  

  I struggled to center vertically before and I did try display:flex justify; content: center; align-items: center; but without the 100vh as I don't understand how or why 100vh works, could you please elaborate on it or point me to some resources to check out.

  Thank you so much for your feedback and the encouragement its greatly appreciated <3

  2

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 8 months ago

  @Stroudy

  Here's why this combination works well:

  align-items: center;: This CSS property aligns the items along the cross axis of the flex container, which, by default, is the vertical axis. When set to center, it centers the items vertically within the container.

  justify-content: center;: This property aligns the flex items along the main axis of the flex container, which, by default, is the horizontal axis. When set to center, it centers the items horizontally within the container.

  min-height: 100vh;: Setting the min-height of the container to 100vh ensures that it spans the entire height of the viewport. This is crucial for centering content vertically using align-items: center;. Without a specified height, the container may not occupy the full viewport height, and centering vertically won't work as expected.

  Marked as helpful

  1

  

  P

  Steven Stroud•11,910

  @StroudyPosted 8 months ago

  @danielmrz-dev

  I appreciate you thank you so much, I understand, I hope to see you around here more and we can discuss other topics in the future <3

  1