Blog Preview Card Solution

Community feedback

• 

  Marley Semende•570

  @Marley-Semende

  Posted over 1 year ago

  Hi @jcad57. You can solve the footer issue by using flexbox to layout your page. for exampl if you get rid of the position absolute properties your code would look like this :

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

  I've removed the position: absolute and top, right properties and the 92% width on the card and just stuck to a body width of 100vw;. Margin-right of -50% is also affecting the placement of your card, I'd just stick to the above highlighted display: flex for placement. The transform translate property is also affecting your placement, I'd also get rid of it and stick with just display: flex for the card placement and by removing those properties and using flexbox you will get your desired results. I hope this helps. Let me know if anything is unclear.

  21

  Marked as helpful
• 

  P

  Daniel 🛸•44,790

  @danielmrz-dev

  Posted over 1 year ago

  Hello @jcad57!

  Your project looks great!

  I noticed that you used position to place the card in the middle of the page. Here's a very efficient (and better) way to center the card:

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

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

  I hope it helps!

  Other than that, great job!

  11

  Marked as helpful