Responsive Blog Preview card page using HTML & CSS

Community feedback

• 

  Kwabena Boakye•470

  @Kingkobi01Posted 6 months ago

  Hi

  Congratulations on finishing this challenge! 🎉🎉 Your card component looks perfect. The only problem was how to center it vertically. You can do that by giving the body a max-width, and a min-height, and then making it either a flex or a grid container.

  For example, let's say the card has a class of card and this card is a direct child of the body, we can use these lines of code to center the card

  
  body{
  max-width-100vw;
  min-height:100vh;
  overflow-x:hidden; //to prevent side-scrolling
  display: grid;
  place-items: center;
  }
  

  the last two lines are those that are really doing the job. If you don't like grid you can also use flex

  display: flex;
  align-items: center;
  justify-content: center;
  

  I hope this helps. ✌🏿

  Marked as helpful

  1