Blog Preview Card Using the CSS Box Model

Community feedback

• 

  AEX•250

  @dev-aexPosted 9 months ago

  Great work!

  Regarding the div container question, in this case, you should use an ID. IDs are used to select only one HTML element at a time. Therefore, you can't use the same ID name for two different elements. On the other hand, classes are used to apply the same style to multiple HTML elements.

  Marked as helpful

  1

  ---

  

  Dee•40

  @dgrow9Posted 9 months ago

  @AEXdes Ok cool, that's what I thought. Thanks!!

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 9 months ago

  Hello @dgrow9!

  Your project looks great!

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

  • Although you've done a very good job using position to center the card, it is not the best option to do it. Position 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!

  0