Responsive Card using basic CSS

Community feedback

• 

  P

  Daniel 🛸•44,810

  @danielmrz-dev

  Posted over 1 year ago

  Hello @Akshoo!

  Your project looks excelent!

  Since you said that centering the card was difficult, here's another (and the most used) way to do it:

  • You can apply this to the body (in order to work properly, you can't use position or margins):

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

  Using position and translate like you did is not wrong, but only works well on projects with only one centered element.

  Well, now you know 2 ways to do it anyway 😊

  I hope it helps!

  20

  Marked as helpful
• 

  Jax Teller•670

  @piushbhandari

  Posted over 1 year ago

  i would stay away from centering this with position absolute and instead use display:flex, align-items: center; justify-content: center; min-height: 100vh; on the body element.

  also, you'll see this component on a lot of web pages, so presumably it's going to link somewhere. since the title is hoverable/focusable, i would surround the h2 element in a link <a href="#"><h2>HTML & CSS foundations</h2></a>

  also i would change the <h5> tag to just a <p> element. when creating your markup, your heading tags need to be structured.

  10

  Marked as helpful